如何使用jQuery在H標籤內切換？

Question

我遇到了選擇器的問題，我認爲。這是我想要做的。我有幾個H3標籤，裏面有一個href，位於文本段落的上方。段落都有一個隱藏它們的類。我希望能夠點擊鏈接，並且只打開特定h3的隱藏div。我試過的所有東西都會切換所有隱藏的div（因爲它們共享一個類），或者它們不能在h3之內。這是這段代碼的麻煩，除非我在H3之外有一個不好的代碼，否則它不起作用。

這裏的HTML：

<h3><a class="expander" href="#">Headline</a></h3> 
<div class="hidden-text"> 
<p>some text here....</p> 
</div> 

<h3>same thing on down... 

這裏是jQuery的：

<script type="text/javascript"> 
$(document).ready(function() { 
$("a.expander").click(function() { 
    $(this).next(".hidden-text").toggle(); 
}); 
}); 
</script> 

有沒有更好的方式來做到這一點？

Answer 1

把整個東西放在一個容器中，併爲錨點標記選擇器設置上下文，並將一個id放入div標記並將其設置爲錨點標記的rel屬性。喜歡的東西

<div id="divID"> 
    <h3><a class="expander" href="#" rel="#divHidden1">Headline</a></h3> 
    <div id="divHidden1" class="hidden-text"> 
     <p>some text here....</p> 
    </div> 
</div> 

$(function() { 
    $("a.expander","#divID").click(function() { 
     var div = $(this).attr("rel"); 
     $(div).toggle(); 
    }); 
}); 

Answer 2

嘗試：

$("a.expander").click(function() { 
    $(this).parent().next(".hidden-text").toggle(); 
});