jQuery下拉菜单-用户单击内部ul之外的任何位置时隐藏内部ul

Question

我有一个jQuery下拉菜单，除用户在内部ul外部（例如， body或文档的其余部分）单击之外，其他所有功能均正常运行，内部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");
        });
    });
});

因此，也许做一些类似的事情：

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

我是jQuery和JavaScript的新手，我试图四处寻找问题，但是很难表达。 我还注意到jQuery的slideUp有一个callback函数，我不知道如何使用它。 有什么帮助吗？ 不胜感激！ :-)

编辑

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>

Answer 1

这样就可以了

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