javascript - 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 有点陌生，我试图四处寻找我的问题，但它有点难以表达。callback我还注意到jQuery有一个函数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");
        });
    });
});