javascript - 使用 jQuery 显示嵌套的 UL

Question

我有一个嵌套的 ul 来制作子菜单。我想要一个点击事件来显示 child ul 并保持其他人折叠。

HTML

<div class="sideMenu">  
<ul>
<li class="titledUl"><b>Dashboard</b>
                </li>
                    <ul class="subUl">
                        <li>Dash Tool 1
                        </li>
                        <li class="subUl">Dash Tool 2
                        </li>
                    </ul>
            </ul>   
            <ul>
                <li class="titledUl"><b>User Managment</b>
                </li>
                    <ul class="subUl">
                        <li>UM Tool 1
                        </li>
                        <li>UM Tool 2
                        </li>
                    </ul>
            </ul>
        </div>  

jQuery

$( document ).ready(function() {
console.log( "ready!" );

$('.titledUl').click(function() {
    console.log('clicked')
    $(this).closest('.subUl').show();
    console.log("should show")
});
});

当我点击父 ul 时，它会显示我所有的控制台日志。 (也使用 css display none 隐藏子 uls)

谢谢!

Answer 1

您好，您在这里完成了工作:http://jsfiddle.net/webcarvers/RYvGv/

HTML:

<div class="sideMenu">
    <ul>
        <li class="titledUl"><b>Dashboard</b>
         <ul class="subUl">
            <li>Dash Tool 1</li>
            <li>Dash Tool 2</li>
        </ul>
        </li>

    </ul>
    <ul>
        <li class="titledUl"><b>User Managment</b>
        <ul class="subUl">
            <li>UM Tool 1</li>
            <li>UM Tool 2</li>
        </ul>
        </li>
    </ul>
</div>

CSS:

.subUl{
    display:none;
}
.titledUl{
    cursor:pointer;
}

JS:

$(document).ready(function(){
$('.titledUl').on('click', function() {
    $(this).closest('ul').find(".subUl").slideToggle(500);
});
});