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 callback有一个slideUp函数，我无法弄清楚如何使用它。有帮助吗？非常感谢！ ： - ）

修改

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