Question

我有一个jquery问题，我是初学者！

我想将隐藏/显示切换应用于div中的一系列段落。我在页面上有许多类似的div元素，它们都有单独的切换链接。

我的HTML是：

<div class="profile">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="more">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<a href="#" title="More" class="more">More</a>
</div>
<div class="profile">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="more">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<a href="#" title="More" class="more">More</a>
</div>

如何使用jQuery在页面上单独切换每个div（div class =“more”）？目前所有div都在同一时间隐藏/显示！

由于

Answer 1

$('.more').click(function(){ 
  $(this).prev('div .more').toggle();

})

工作演示 http://jsfiddle.net/wc2sD/

Answer 2

只需更改要隐藏/显示的文本的类，只要“更多”链接是“个人资料”div的“子”，它就应该可以使用

<script>
$(".more").click(function(){

 $(this).parent().find("div.more-text").toggle();

});
</script>
<div class="profile">
<p>TEXT</p>
<div class="more-text'>
<p>MORE TEXT</p>
</div>
<a href="#" title="More" class="more">More</a>
</div>

<div class="profile">
<p>TEXT</p>
<div class="more-text">
<p>MORE TEXT</p>
</div>
<a href="#" title="More" class="more">More</a>
</div>

Answer 3

@sandeep回答是正确的，但他在选择器中有一个空格。

$('a.more').click(function() {
    $(this).prev('div.more').toggle('normal');
});

针对div元素

3 个答案: