单击时如何停止下拉菜单子向上滑动

Question

我正在尝试创建一个下拉菜单，当单击该菜单时，该菜单会保持向下，但在下拉区域内的任何位置单击时，该菜单都不会向上滑动。 仅当单击页面上的其他位置时，它才会消失。

我正在努力做到这一点。 您可以在这里看到我在做什么：

HTML

<nav id="moo">
<ul>
<li>Item 1 <i>o</i>
<div class="dropdown">
        <ul>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
</li>
<li>Item 1 <i>o</i>
    <div class="dropdown">
        <ul>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </div>
</li>
</ul>
</nav>

CSS

ul { padding: 0px; margin: 0px; }
li { display: inline; }
nav li { position: relative; }
nav i { cursor: pointer; font-weight: bold; background-color: red;padding: 5px; }
.dropdown { display: none; position: absolute; border:1px solid #ccc; padding: 10px; }  
.dropdown li {
display: block;
}

脚本

$('nav li').click(function () {
var $childDropdown = $(this).find('.dropdown');

if ($childDropdown.is(':visible')) {
    $('.dropdown').slideUp(300);
} else {
    $('.dropdown').slideUp(300);
    $childDropdown.slideDown(300);
}
});

/* Anything that gets to the document
will hide the dropdown */
$(document).click(function(){
$(".dropdown").hide();
});

/* Clicks within the dropdown won't make
it past the dropdown itself */
$("nav").click(function(e){
e.stopPropagation();
});

这是小提琴版本：

http://jsfiddle.net/susannalarsen/buNq9/

Answer 1

您将需要使用事件目标属性，并遍历其父项，以找出触发事件的元素。 如果它是“ .dropdown”类中的一个元素，则不应应用任何向上滑动，否则请关闭下拉菜单。

例

$('nav > ul > li').click(function (e) {
var $childDropdown = $(this).find('.dropdown');

if ($childDropdown.is(':visible')) {

    var target = $(e.target);
    if (!$(target).parents(".dropdown").length) {
        $('.dropdown').slideUp(300);
    }    

} ...

注意，我在$（'nav> ul> li'）中更改了选择，该选择仅适用于上级的LI元素。