[英]Hide/ show list items when clicking on h4 in .aspx page
我正在建立一个按不同类别分类的通讯档案。 标记如下所示:
<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>
和一个Jsfiddle 演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.