0

我有点麻烦，因为我并没有真正使用 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，它会取消选择父项，并且当我选择输入字段时它会向上滑动。

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

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

4

3 回答 3

2

我可能错了，但我认为你的错误就在这里：

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

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

于 2013-05-29T01:37:27.570 回答
1

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

$('form').on('click', 'input', function(e) {
    e.stopPropagation();
});
于 2013-05-29T01:45:34.310 回答
0

只需添加这一行：

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

托拜厄斯·鲍迈斯特是对的。

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

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

于 2013-05-29T02:17:07.840 回答