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

Question

I am attempting to make a dropdown menu that when clicked stays down but also, when clicking anywhere within the dropdown area, it will not slide up. Only when clicked elsewhere on the page should it disappear.

I am struggling to make this happen though. You can see what I am doing here:

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

Here is fiddle version:

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

Answer 1

You will need to work with the event target property and traverse up its parents to find out what element has triggered the event. if it's an element inside ".dropdown" class, then no sliding-up should be applied, otherwise close 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);
    }    

} ...

Notice that i changed the selection in $('nav > ul > li'), which will apply only to the LI elements of the upper level.