我试图更多地阅读，阅读更少的功能。
该功能似乎有效，但不正确。
来自加载的按钮说明了更多，但它并没有显示较短的版本。
当你点击按钮时，它会立刻改变所有幻灯片，当我只想要点击时移动它。
我确定这是一个简单的修复，但我是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');
});
看看它的外观如何，
http://jsfiddle.net/strohy85/6pEfg/1/
我有一个版本工作，但它有点儿麻烦，如果你按下查看更多视图少几次，它显示应隐藏的链接不知道为什么。 http://jsfiddle.net/strohy85/6pEfg/8/
答案 0 :(得分：0)
使用此代码
<强> HTML
<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" style="display:none;">
<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>
和 Javascript
<script>
$(".team-member .more-link span.text").click(function(){
//alert($(".full-text").attr('style'));
var moreAndLess = ($(".full-text").attr('style') == "") ? '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');
});
</script>
它会像你期望的那样工作。
答案 1 :(得分：0)
可能你需要这样的东西：
$(".team-member .more-link span.text").click(function () {
var moreAndLess = $(this).text() == 'View More' ? 'View Less' : 'View More';
$(this).text(moreAndLess);
$(".full-text").slideToggle();
});
并且你的html稍微更改了display:none的样式或者创建了一个css类并将display属性设置为none：
<div class="full-text" style='display:none;'>
在css类中：
.full-text{
display:none;
}
答案 2 :(得分：0)
嗨我能够复制你问题的一部分，你想要为你的div下滑动画。
请查看此link了解详情。
它的主要思想是使用jquery animate()函数。
$(this).prev().animate({
height: '300'
}, 500);
$(this).text('Read Less');
不幸的是，animate()函数有一些限制，因为它无法为元素的auto css属性设置动画。因此，让代码动画为300px。
答案 3 :(得分：0)
我找到了一个解决方案，这里是jsfiddle
http://jsfiddle.net/strohy85/Hg7pD/3/
$(document).ready(function () {
$('.full-text').hide();
$('.view-btn').click(function (event) {
event.preventDefault();
$(this).parent().find('.full-text').slideToggle('slow');
$(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
});
});