Jquery + css下拉菜单问题

Jquery + css dropdown menu issue

本文关键字：问题 下拉菜单 css Jquery      更新时间：2023-09-26

我有一点麻烦，因为我没有真正使用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，它取消了父选项卡，当我选择输入字段时，它会滑回来。

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

帮助是非常感激的，干杯!

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

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

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

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

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

添加这一行:

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

Tobias Baummeister是对的。

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

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

相关文章：