使用jQuery显示嵌套的UL

Question

我有一个嵌套的ul来制作子菜单。 我想要一个单击事件来显示孩子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来隐藏子ul）

谢谢！

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);
});
});

Answer 2

我得到了大家的帮助。 谢谢！

新的HTML

            <div class="sideMenu">  
            <ul>
                <li class="titledUl"><b>Dashboard</b>
                    <ul class="subUl">
                        <li>Dash Tool 1
                        </li>
                        <li class="subUl">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>  

新的jQuery

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

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

});