Question

我有一个嵌套的ul来制作一个子菜单。我想要一个click事件来显示孩子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);
});
});

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

});

使用jQuery显示嵌套的UL

2 个答案: