显示/隐藏 ul li onclick jquery

Question

单击 <a href="#"></a> 时，我想显示/隐藏我的子菜单。这是一个代码示例：

 <ul>
    <li><a href="www.example.com">Test</a></li>
    <li><a href="www.example.com">Test</a></li>
    <li class="submenu">
        <a href="#">Test 2</a>
        <ul class="ul_submenu">
            <li><a href="www.example.com">Test</a></li>
            <li><a href="www.example.com">Test</a></li>
            <li class="submenu_2">
                <a href="#">Test 3</a>
                <ul class="ul_submenu_2">
                    <li><a href="www.example.com">Test</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

 $( 'li.submenu a[href="#"]').click(function(e) {
    e.preventDefault();
    $("ul.ul_submenu").css("display","block");
}, function() {
    $("ul.ul_submenu").css("display","none");
});

你可以找到一个 JSFiddle 。

我需要在有子元素时允许点击标签，并修改li的显示。但是当用户点击这样的标签时，我需要取消页面重新加载： <a href="#"></a>

原文由 Ty Yt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以做，

 $('li a').click(function(e) {
  e.preventDefault();
  $(this).closest("li").find("[class^='ul_submenu']").slideToggle();
});

小提琴

原文由 Anoop Joshi P 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

此代码将打开“Test2”子菜单：

 $('li.submenu a[href="#"]').click(function(e) {
   e.preventDefault();
   $(this).parent().children("ul.ul_submenu").show();
});

 .ul_submenu {
  display: none;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="www.example.com">Test</a></li>
  <li><a href="www.example.com">Test</a></li>
  <li class="submenu"><a href="#">Test 2</a>
    <ul class="ul_submenu">
      <li><a href="www.example.com">Test</a></li>
      <li><a href="www.example.com">Test</a></li>
      <li class="submenu_2"><a href="#">Test 3</a>
        <ul class="ul_submenu_2">
          <li><a href="www.example.com">Test</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

原文由 Eugene 发布，翻译遵循 CC BY-SA 3.0 许可协议