Jquery选择两个不同类的ul

Question

https://dl.dropboxusercontent.com/u/12360312/new_nav.html

我有一个多级导航栏。现在一切都是通过CSS完成的。

我希望下拉菜单在点击或点击它们时通过JQuery发生。

我使用JQuery切换函数，如下所示

<script>
    $(document).ready(function () {
        $("ul").click(function () {
            $(".dropdown").toggle();
        });
    });
</script>

这使得第一级下拉菜单可以与JQuery一起工作。现在，我该如何对第二级下拉菜单进行同样的操作呢？

我是JQuery的新手。所以我写的..。这在技术上是正确的吗？

请参阅链接的源代码以了解我的CSS和HTML :)

谢谢

下面是HTML和CSS

<html lang="en">

<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
ul{
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li{
    display: inline-block;
    position: relative;
    line-height: 21px;
    text-align: left;
}
ul li a{
    display: block;
    padding: 8px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover{
    color: #fff;
    background: #939393;
}
ul li ul.dropdown{
    min-width: 125px; 
    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
}
ul li:hover ul.dropdown{
    display: block;
}
ul li ul.dropdown li{
    display: block;
    border:1px solid #333;
}

ul li ul li ul.dropdown2 {
    left: 125px;
    top:0;
    display: none;
}
ul li ul li:hover ul.dropdown2 {
    position: absolute;
    left: 124px;
    top:0;
    display:block;
}  
</style>


</head>
<body>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
        <a href="#">Products &#9662;</a>
        <ul class="dropdown">
            <li><a href="#">Laptops &#9662;</a>
                    <ul class="dropdown2">
                            <li><a href="#">Dell</a></li>
                            <li><a href="#">Sony</a></li>
                    </ul>
            </li>
           <li><a href="#">Monitors</a></li>
            <li><a href="#">Printers</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>
<p>Lorem ipsum dolor sit amet,</p>
</body>
</html> 

Answer 1

试试这个：

$(document).ready(function()
{ 
    $("li").click(function(event)
    {
        event.stopPropagation();
        // to stop the event to propagating to the parent ul's and closing/opening unwanted dropdowns
        $(event.target).parents('li').eq(0).find(">ul").toggle();
    });
});

http://codepen.io/anon/pen/aOXQvK