使用 jQuery .on() 制作下拉菜单

发布于 2025-01-05 00:23:55 字数 1435 浏览 0 评论 0原文

我正在尝试制作一个 jQuery 下拉菜单，它添加一个类来了解它是向下还是向上。但由于某种原因 .on() 函数似乎没有响应点击。我做错了什么？

这是我的 HTML：

<ul id="main-menu" class="menu">
    <li>
        <a href="http://example.com">Item 1</a>
    </li>
    <li class="drop-down">
        <a href="http://example.com">Item 2</a>
        <ul class="sub-menu">
            <li>
               <a href="http://example.com">Sub Item 1</a>
            </li>
            <li>
               <a href="http://example.com">Sub Item 2</a>
            </li>
            <li>
               <a href="http://example.com">Sub Item 3</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="http://example.com">Item 3</a>
    </li>
</ul>

和我的 JS：

// Slide down
jQuery('#main-menu > li.drop-down > a').not('.active a').click(function(e){
    e.preventDefault();
    jQuery(this).closest('li.drop-down').addClass('active').find('ul.sub-menu').slideDown();
});

// Slide up
jQuery('#main-menu > li.drop-down.active > a').on('click', function(e){
    e.preventDefault();
    jQuery(this).closest('li.drop-down').find('ul.sub-menu').slideUp(400, function(){
        jQuery(this).closest('li.drop-down.active').removeClass('active');
    });
});

谢谢！

原文

I'm trying to make a jQuery drop down menu, that adds a class to know if it's down or up. But for some reason the .on() function doesn't seem to respond to clicks. What are I doing wrong?

Here is my HTML:

<ul id="main-menu" class="menu">
    <li>
        <a href="http://example.com">Item 1</a>
    </li>
    <li class="drop-down">
        <a href="http://example.com">Item 2</a>
        <ul class="sub-menu">
            <li>
               <a href="http://example.com">Sub Item 1</a>
            </li>
            <li>
               <a href="http://example.com">Sub Item 2</a>
            </li>
            <li>
               <a href="http://example.com">Sub Item 3</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="http://example.com">Item 3</a>
    </li>
</ul>

And my JS:

// Slide down
jQuery('#main-menu > li.drop-down > a').not('.active a').click(function(e){
    e.preventDefault();
    jQuery(this).closest('li.drop-down').addClass('active').find('ul.sub-menu').slideDown();
});

// Slide up
jQuery('#main-menu > li.drop-down.active > a').on('click', function(e){
    e.preventDefault();
    jQuery(this).closest('li.drop-down').find('ul.sub-menu').slideUp(400, function(){
        jQuery(this).closest('li.drop-down.active').removeClass('active');
    });
});

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我早已燃尽 2025-01-12 00:23:55

您不需要 2 个处理程序来实现您想要实现的目标。

您可以仅使用一个利用 toggleClass 和 slideToggle jQuery 方法的处理程序。

// Slide down
jQuery('#main-menu').on('click', 'li.drop-down > a', function(e){
    e.preventDefault();
    jQuery(this)
    .closest('li.drop-down')
    .toggleClass('active')
    .find('ul.sub-menu')
    .slideToggle(400, function(){
         if($(this).is(':hidden')){
              jQuery(this).closest('li.drop-down.active').removeClass('active');
         }
    });
});

参考文献：.toggleClass()、.slideToggle()

You don't need 2 handlers for what you are trying to achieve.

You can just use one handler making use of toggleClass and slideToggle jQuery methods.

// Slide down
jQuery('#main-menu').on('click', 'li.drop-down > a', function(e){
    e.preventDefault();
    jQuery(this)
    .closest('li.drop-down')
    .toggleClass('active')
    .find('ul.sub-menu')
    .slideToggle(400, function(){
         if($(this).is(':hidden')){
              jQuery(this).closest('li.drop-down.active').removeClass('active');
         }
    });
});

References: .toggleClass(), .slideToggle()

回复收藏 0 原文