jQuery下拉菜单 - 当用户点击内部ul之外的任何地方时隐藏内部ul

I have a jQuery drop down menu and everything works well except when the user clicks outside of the inner ul (e.g. the rest of the body or document) the inner ul does not pull back up. Any ideas? Here's my code:

我有一个jQuery下拉菜单,一切正常,除非用户点击内部ul之外(例如身体或文档的其余部分),内部ul不会拉回来。有任何想法吗?这是我的代码:

$(document).ready(function() {
    $("#cp-nav ul li").click(function() {
        $("#cp-nav ul ul").slideUp("fast", function(){});

        $("ul", this).slideDown("fast", function(){
            $("ul", this).slideUp("fast");
        });
    });
});

So maybe do something like:

所以可能会这样做:

$("ul", !this).slideUp("fast", function(){});

I am kind of new to jQuery and JavaScript, and I tried to look around for my problem but it's kind of difficult to phrase. I also noticed there is a callback function for jQuery's slideUp, and I can not figure out how to use it. Any help? It would be much appreciated! :-)

我是jQuery和JavaScript的新手,我试图四处寻找我的问题,但这很难说。我还注意到jQuery的slideUp有一个回调函数,我无法弄清楚如何使用它。有帮助吗?非常感谢! :-)

Edit

HTML:

<nav id="cp-nav">
    <ul>
        <li><a href="home.html">Home</a></li>
        <li>
            <a href="products.html">Products</a>
            <ul>
               <li>Design Platforms</li>
               <li>3D Animation</li>
               <li>Graphic Design</li>
               <li>Python</li>
            </ul>
        </li>
        <li>
            <a href="products.html">About</a>
            <ul>
               <li>Company History</li>
               <li>CEO &amp; Founder</li>
               <li>etc.</li>
               <li>etc.</li>
            </ul>
        </li>
        <li>
            <a href="products.html">etc.</a>
            <ul>
               <li>etc.</li>
               <li>etc.</li>
               <li>etc.</li>
               <li>etc.</li>
            </ul>
        </li>
    </ul>
</nav>

1 个解决方案

#1

This would do it

这样做会

$(document).ready(function() {
    $("#cp-nav").click(function(e){
        e.stopPropagation(); // this stops the bubbling from going any higher
    });
    $('body').click(function(){ // this is only reached if the clicks comes outside the #cp-nav
        $("#cp-nav ul ul").slideUp('fast');
    });
    $("#cp-nav ul li").click(function() {
        $("#cp-nav ul ul").slideUp("fast", function(){});

        $("ul", this).slideDown("fast", function(){
            $("ul", this).slideUp("fast");
        });
    });
});