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

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

Answer 2

您需要处理登录表单输入框的click事件，以阻止事件传播到正文。

$('form').on('click', 'input', function(e) {
    e.stopPropagation();
});

Answer 3

只需添加以下行：

$('#nav').click(function(e){e.stopPropagation()})

Tobias Baummeister是对的。

您正在使用e.stopPropagation()，但在第一级导航中。将其添加到整个ul，您的问题就解决了。

小提琴：http://jsfiddle.net/Adrdx/

Jquery + css下拉菜单问题

3 个答案: