javascript - Jquery + css 下拉菜单问题

Question

我遇到了一些麻烦，因为我并没有真正使用 jquery，我也没有很多使用 javascript 的经验，但我发现了一个看起来不错的好用菜单:

jQuery(window).load(function() {

    $("#nav > li > a").click(function (e) { 
        if ($(this).parent().hasClass('selected')) {
            $("#nav .selected div div").slideUp(100);
            $("#nav .selected").removeClass("selected"); 

        } else {
            $("#nav .selected div div").slideUp(100); 
            $("#nav .selected").removeClass("selected");

            if ($(this).next(".subs").length) {
                $(this).parent().addClass("selected"); 
                $(this).next(".subs").children().slideDown(200);
            }
        }
        e.stopPropagation();
    }); 

    $("body").click(function () { 
        $("#nav .selected div div").slideUp(100); 
        $("#nav .selected").removeClass("selected");
    }); 

});

菜单就这么简单:

<li><a href="#">Tutorials</a>
                <div class="subs">
                    <div>
                        <ul>
                            <li><h3>Submenu #1</h3>
                                <ul>
                                    <li><a href="#">Link 1</a></li>
                                    <li><a href="#">Link 2</a></li>
                                    <li><a href="#">Link 3</a></li>
                                    <li><a href="#">Link 4</a></li>
                                    <li><a href="#">Link 5</a></li>
                                </ul>
                            </li>
                            <li><h3>Submenu #2</h3>
                                <ul>
                                    <li><a href="#">Link 6</a></li>
                                    <li><a href="#">Link 7</a></li>
                                    <li><a href="#">Link 8</a></li>
                                </ul>
                            </li>
                            <li><h3>Submenu #3</h3>
                                <ul>
                                    <li><a href="#">Link 9</a></li>
                                    <li><a href="#">Link 10</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>

我添加的是一个简单的登录选项卡，它会展开并向您显示用户名和密码输入，但使用当前的 jquery，它会取消选择父项，并在我选择输入字段时向上滑动。

我的问题是我需要添加(或删除)什么来阻止它在我按下输入字段(和提交按钮)时向上滑动

非常感谢您的帮助， 干杯!

Answer 1

我可能是错的，但我认为你的错误就在这里:

 $("body").click(function () { 
        $("#nav .selected div div").slideUp(100); 
        $("#nav .selected").removeClass("selected");
    }); 

由于输入字段也是您 body 的一部分，因此它会在单击时调用此函数。