在.aspx页面中单击h4时隐藏/显示列表项

Hide/ show list items when clicking on h4 in .aspx page

本文关键字：隐藏 显示 列表 h4 aspx 单击      更新时间：2023-09-26

我正在构建一个按不同类别排序的时事通讯档案。标记如下：

<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中，但这会导致错误。有什么建议吗？

您需要使用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>

和一个Jsfidle演示

相关文章：