通過單擊p元素顯示/隱藏li

Question

我想通過單擊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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;REFRESH VREEMDELINGEN</a>
        </p>
      </li>
   </ul>
</li>

您會看到我的li 標簽里有p標簽 ，還有ul標簽 。 布局如下所示：

但我想有可能將其打開或關閉。

開放時間 ：

關閉：

因此，當您單擊它時，內容將打開或關閉。 我怎樣才能做到這一點？

Answer 1

您可以像下面這樣：

$('.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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;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> &nbsp;REFRESH</a> </p> </li> </ul> </li>