javascript - 在 .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 函数，因此它会寻找下一个 <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