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> 

あなたは私が私の李でpタグともULタグを持って見ることができます。レイアウトは次のようになります。

しかし、私はそれが開いているか閉じている可能性を持っていると思います。

オープン：休館

：

あなたはそれをクリックしたときに、コンテンツが開閉します。これどうやってするの？

Answer 1

あなたは以下のようにそれを行うことができます： -

$('.tree_item').click(function(e){ 
    e.stopPropagation(); 
    $(this).next('ul').toggle(); 
}); 

例： - ：//api.jquery

$('.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>