もっと読む、もっと読む機能を作ろうとしています。
関数は機能しているようですが、正しくありません。
ロードのボタンには「続きを読む」と表示されますが、そもそも短いバージョンは表示されません。
次に、ボタンをクリックすると、すべてのスライドが一度に変更されます。クリックしたときにスライドを移動するだけです。
簡単に修正できると確信していますが、jqueryの初心者なので、最も簡単な関数を作成するのに苦労しています
ありがとう
<div class="team-member">
<div class="image">
<img width="120" height="120" />
</div>
<div class="text">
<h3>Mr John Kuo <span>LLB</span></h3>
<h4>Executive Director and Chief Operating Officer</h4>
<div class="more-less">
<div class="more-block">
<p>Mr Kuo has more than 10 years’ experience in international import & exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>
<div class="full-text">
<p>Mr Kuo has more than 10 years’ experience in international import & exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>
<p>Mr Kuo has more than 10 years’ experience in international import & exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>
<p>Mr Kuo has more than 10 years’ experience in international import & exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>
</div>
</div>
</div>
<div class="more-link">
<a href="#"><span class="icon"></span><span class="text">View More</span></a>
</div>
</div>
</div>
<div class="team-member">
<div class="image">
<img width="120" height="120" />
</div>
<div class="text">
<h3>Mr. Bon Jun<span></span></h3>
<h4>Non-Executive Director</h4>
<div class="more-less">
<div class="more-block">
<p>Mr Li holds a Bachelor of Mechanical Engineering degree from the Beijing Architecture Engineering University. He has worked for one of the biggest state owned company which has imported plant and e company under Thyssen in Germany and then moved to to work as the Managing Director of Golden Mall Enterprise until 1999.</p>
<div class="full-text">
<p>Mr. Li has rich experience in connecting foreign companies with enterprises and ever been involved in more than big projects with success. At present Mr. Li is the Limited in Beijing providing consulting services to clients globally In recent years Mr. Li has assisted Australian resources companies in establishing relationship with customers in leading to a number of successful projects.</p>
</div>
</div>
</div>
<div class="more-link">
<a href="#"><span class="icon"></span><span class="text">View More</span></a>
</div>
</div>
</div>
そして、ここにjqueryがあります
$(".team-member .more-link span.text").click(function(){
var moreAndLess = $(".full-text").is(':visible') ? 'View More' : 'View Less';
$(this).text(moreAndLess);
$(".full-text").slideToggle();
});
$(".team-member .more-link a").click(function(event) {
event.preventDefault();
$('<div/>')
.append('default ' + event.type + ' prevented')
.appendTo('#log');
});
これがどのように見えるかのjfiddleです。
http://jsfiddle.net/strohy85/6pEfg/1/
私はバージョンを動作させましたが、少しバグがあります.view more view lessを数回押すと、理由がわからない非表示にする必要があるリンクが表示されます. http://jsfiddle.net/strohy85/6pEfg/8/