下拉菜单打开宽度Jquery

Dropdown Menu Open width Jquery

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

我有一个下拉菜单问题，必须保持打开状态才能单击。打开菜单后，您可以单击里面的链接和刚刚单击的菜单项。

我该如何补救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

只需删除

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

这是一把小提琴，你可以查看

清除event.preventDefault();

相反，喜欢这个

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

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

https://jsfiddle.net/btevfik/9m9rufqx/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

相关文章：