[英]Show/hide li by clicking on p element
我想通过单击p显示/隐藏ul。 我的HTML看起来像这样:
<li class="type_unknown depth_2">
<p class="tree_item branch">
<a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1123">
<span class="glyphicon glyphicon-spacer"></span> Daoust University Refreshs
</a>
</p>
<ul id="yui_3_15_0_4_1495615549528_188">
<li class="type_unknown depth_3">
<p class="tree_item leaf">
<a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1257"><span class="glyphicon glyphicon-spacer"></span> REFRESH DIVERSITEIT</a>
</p>
</li>
<li class="type_unknown depth_3">
<p class="tree_item leaf">
<a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1230"><span class="glyphicon glyphicon-spacer"></span> REFRESH DOELGROEPENVERMINDERINGEN</a>
</p>
</li>
<li class="type_unknown depth_3" id="yui_3_15_0_4_1495615549528_187">
<p class="tree_item leaf wiki_newentry" id="yui_3_15_0_4_1495615549528_186">
<a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1167"><span class="glyphicon glyphicon-spacer"></span> REFRESH FEESTDAGEN</a>
</p>
</li>
<li class="type_unknown depth_3">
<p class="tree_item leaf">
<a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1270"><span class="glyphicon glyphicon-spacer"></span> REFRESH VREEMDELINGEN</a>
</p>
</li>
</ul>
</li>
您会看到我的li 标签里有p标签 ,还有ul标签 。 布局如下所示:
但我想有可能将其打开或关闭。
开放时间 :
因此,当您单击它时,内容将打开或关闭。 我怎样才能做到这一点?
您可以像下面这样:
$('.tree_item').click(function(e){
e.stopPropagation();
$(this).next('ul').toggle();
});
例:-
$('.tree_item').click(function(e){ e.stopPropagation(); $(this).next('ul').toggle(); });
ul,li{ list-style:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="type_unknown depth_2"> <p class="tree_item branch"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1123"> <span class="glyphicon glyphicon-spacer"></span> Daoust University Refreshs </a> </p> <ul id="yui_3_15_0_4_1495615549528_188"> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1257"><span class="glyphicon glyphicon-spacer"></span> REFRESH DIVERSITEIT</a> </p> </li> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1230"><span class="glyphicon glyphicon-spacer"></span> REFRESH DOELGROEPENVERMINDERINGEN</a> </p> </li> <li class="type_unknown depth_3" id="yui_3_15_0_4_1495615549528_187"> <p class="tree_item leaf wiki_newentry" id="yui_3_15_0_4_1495615549528_186"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1167"><span class="glyphicon glyphicon-spacer"></span> REFRESH FEESTDAGEN</a> </p> </li> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1270"><span class="glyphicon glyphicon-spacer"></span> REFRESH VREEMDELINGEN</a> </p> </li> </ul> </li> <li class="type_unknown depth_2"> <p class="tree_item branch"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1123"> <span class="glyphicon glyphicon-spacer"></span> Daoust </a> </p> <ul id="yui_3_15_0_4_1495615549528_188"> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1257"><span class="glyphicon glyphicon-spacer"></span> REFRESH</a> </p> </li> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1230"><span class="glyphicon glyphicon-spacer"></span> REFRESH</a> </p> </li> <li class="type_unknown depth_3" id="yui_3_15_0_4_1495615549528_187"> <p class="tree_item leaf wiki_newentry" id="yui_3_15_0_4_1495615549528_186"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1167"><span class="glyphicon glyphicon-spacer"></span> REFRESH</a> </p> </li> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1270"><span class="glyphicon glyphicon-spacer"></span> REFRESH</a> </p> </li> </ul> </li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.