Question

我的下拉菜单出现问题，必须对点击保持打开状态。菜单打开后，您可以单击里面的链接，然后单击菜单项。

如何解决preventDefault？

菜单HTML：

<nav class="main-menu">
    <ul id="" class="menu">

        <li>
            <a href="http://www.google.com" target="_blank">Menu One</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="http://www.google.uk" target="_blank">test test test</a></li>
                    ... More links ...
                </ul>
            </div>
        </li>

        ... More items ...

    </ul>
</nav>

这是代码的一部分

$('.main-menu li a').click(function(event) {        
    event.preventDefault();
    $('.main-menu').find('.sub-menu').removeClass('open');
    $(this).parent().find('.sub-menu').addClass('open');
});

此处显示了一个示例JSFIDDLE

Answer 1

只需删除

$('.main-menu').find('.sub-menu').removeClass('open');

Here is a fiddle you can check out

Answer 2

摆脱event.preventDefault();

相反，这样做

<a href="#" onclick="return false">

然后给每个主菜单一个类名。并调用该类的click事件。

https://jsfiddle.net/btevfik/9m9rufqx/3/

Answer 3

您可以使用更具针对性的（.menu > li > a）替换您的选择器：

$('.menu > li > a').click(function(event) {        
    event.preventDefault();
    $('.sub-menu.open').removeClass('open');
    $(this).parent().find('.sub-menu').addClass('open');
});

JSFiddle

下拉菜单打开宽度Jquery

3 个答案: