針對div元素

我有一個jQuery的問題，我是這個初學者！針對div元素

我想將隱藏/顯示切換應用於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>

我怎樣才能使它（= 「更多」的div類）分別切換每個格使用jQuery在網頁上？此刻所有div都同時隱藏/顯示！

感謝

來源

2012-03-07 Rob

@sandeep答案是正確的，但他在選擇器中有一個空格。

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

來源

2012-03-07 13:02:00

我怎麼能添加到這個和更改'更多'鏈接到'更少'當點擊功能？我猜我會使用addClass，removeClass函數？ – Rob 2012-03-08 14:25:52

是的，但是'toggleClass（'less'）'會做。 '$（本）.toggleClass（ '少'）分組（ 'div.more'）切換（）;'。它負責刪除/添加@Rob – 2012-03-09 17:22:10

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

})

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

來源

2012-03-07 12:56:18 sandeep

$（'a。more'）讓'a'的孩子得到''更多'。正確的是$（'a.more'）。 – user1242756 2012-03-07 12:58:40

刪除選擇器中的空格，這將起作用。檢查這個小提琴：http://jsfiddle.net/XRqwj/ – pete 2012-03-07 13:01:30

只要改變類文本隱藏/顯示只要「更多」鏈接是「配置文件」的「孩子」它應該工作

<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>

來源

2012-03-07 13:00:54

回答

相關問題