javascript - 单击时如何停止下拉菜单子(monad)项向上滑动

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

这是 fiddle 版本:

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

Answer 1

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

example

$('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 元素。