Show/hide li 通过点击 p 元素

Question

我希望可以通过点击 p 来 show/hide 一个 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>

Show/hide li 通过点击 p 元素

Show/hide li by clicking on p element

html

javascript

jquery

show-hide