單擊 .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>

我想這不起作用，因為我必須將h4包裝在ul但這會導致錯誤。 有什么建議？

Answer 1

你需要使用 jQuery .next 函數，所以它會在每個 h4 標簽之后尋找下一個<ul>類，這里是一個快速演示：

 (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 演示