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

SCRIPT

$('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”类中的元素，则不应该应用向上滑动，否则关闭下拉列表。

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＆gt; ul＆gt; li'）中的选择，这将仅适用于较高级别的LI元素。

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

1 个答案: