在.aspx中點擊h4時隱藏/顯示列表項目

Question

我正在構建按不同類別排序的新聞稿檔案。該標記看起來是這樣的：

<h4>Category 1</h4> 
       <ul> 
        <li><a href="../Newsletter1" target="_blank" class="button_sharp left">Newsletter 1</a></li> 
        <li><a href="../Newsletter2" target="_blank" class="button_sharp left">Newsletter 2</a></li> 
        <li><a href="../Newsletter3" target="_blank" class="button_sharp left">Newsletter 3</a></li> 

       </ul> 

<h4>Category 2</h4> 
       <ul> 
        <li><a href="../Newsletter1" target="_blank" class="button_sharp left">Newsletter 1</a></li> 
        <li><a href="../Newsletter2" target="_blank" class="button_sharp left">Newsletter 2</a></li> 
        <li><a href="../Newsletter3" target="_blank" class="button_sharp left">Newsletter 3</a></li> 

       </ul> 

現在會有相當多的種類和通訊的，所以我想的通訊被隱藏，直到類別h4用戶點擊。再次點擊時再次隱藏。 我試過這個功能：

<script type="text/javascript"> 
    $('h4').click(function() { 
    $(this).find('ul').toggle(); 
}); 
</script> 

我想這是不工作，因爲我必須包裝在ul的h4但這會導致錯誤。有什麼建議麼？

Answer 1

您需要使用jQuery的。接下來的功能，所以它會尋找下一個<ul>課後這裏每個H4標籤是一個快速演示演示：

(function($) { 
 
$('h4').click(function() { 
 
    $(this).next('ul').toggle(); 
 
}); 
 
}).apply(this, [ jQuery ]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h4>Category 1</h4> 
 
<ul> 
 
    <li><a href="../Newsletter1" target="_blank" class="button_sharp left">Newsletter 1</a></li> 
 
    <li><a href="../Newsletter2" target="_blank" class="button_sharp left">Newsletter 2</a></li> 
 
    <li><a href="../Newsletter3" target="_blank" class="button_sharp left">Newsletter 3</a></li> 
 

 
</ul> 
 

 
<h4>Category 2</h4> 
 
<ul> 
 
    <li><a href="../Newsletter1" target="_blank" class="button_sharp left">Newsletter 1</a></li> 
 
    <li><a href="../Newsletter2" target="_blank" class="button_sharp left">Newsletter 2</a></li> 
 
    <li><a href="../Newsletter3" target="_blank" class="button_sharp left">Newsletter 3</a></li> 
 

 
</ul>

而一個 Jsfiddle demo