Question

在页面顶部有一个菜单打开并点击它： menu opens with click

我需要将其更改为使用悬停打开，代码为：

 $(document).on('click','.btn-open-mobile',function(){
        var width = $(window).width();
        if(width > 1024){
            if($('body').hasClass('home') && !$('.box-vertical-megamenus').is('.hiden_content')){
                if($('#nav-top-menu').hasClass('nav-ontop') || $('#header').hasClass('option6') || $('#header').hasClass('option5') ){

                }else{
                    return false;
                }
            }
        }
        $(this).closest('.box-vertical-megamenus').find('.vertical-menu-content').slideToggle();
        $(this).closest('.title').toggleClass('active');
        if( width < 768 ){
          $('.main-menu .navigation-main-menu').hide();
        }

        return false;
    })

当我更换＆＃34;点击＆＃34;使用＆＃34; hover＆＃34;，它可以工作但问题是菜单只有在光标打开时才打开＆＃34;三行图标＆＃34;。如何强制此菜单继续保持打开状态，直到光标移出子菜单。抱歉脏代码，我是新手。

Answer 1

确保您拥有正确的父/子结构。

使用悬停时，您需要定位整个div，而不仅仅是按钮。

jQuery Mousenter https://api.jquery.com/mouseenter/ 应该让您更自由地玩菜单。

$( "nav" )
  .mouseenter(function() {
    $( "p:first", this ).text( "mouse enter" );
    $( "p:last", this ).text( ++n );
  })
  .mouseleave(function() {
    $( "p:first", this ).text( "mouse leave" );
  });

打开菜单，悬停并在光标移出时关闭

1 个答案: