显示/隐藏ul li onclick jQuery [英] Show/Hide ul li onclick jquery

问题描述

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

I'd like to show/hide my submenus when a <a href="#"></a> is clicked. Here is a code example :

<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>

I need to allow click on a tag when there are children elements, and modify the display of li. But I need to cancel the page reload when user clicks on a tag like this : <a href="#"></a>

推荐答案

您可以做到，

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

小提琴

这篇关于显示/隐藏ul li onclick jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！