如何在媒体查询 768（导航栏）中将 Hover 事件更改为 Click 事件

Question

在我的导航上有一个子页面，我正在使用此代码选项 1 和选项 2 都在工作，我可以选择使用其中的哪一个，但问题是在移动设备视图中悬停时子页面仍然显示，这对移动设备来说是个坏主意，我想要实现的是，当涉及到移动设备示例尺寸 768 时，导航栏是可点击的并显示子页面，而不是悬停导航栏并显示子页面。

选项1：

ul.nav li.dropdown:hover > ul.dropdown-menu{
    display: block;
    margin: 0;
}

选项2：

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

我的网站是在 bootstrap 3、wordpress 中构建的，我使用navwalker进行导航

希望您能帮助我解决移动设备导航栏问题。谢谢

我找到了解决问题的方法
在桌面视图中，子页面会在您悬停父导航时显示，而在移动设备视图中，子页面只会在您单击父导航时显示。
感谢 user1079877

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
           $('.dropdown-toggle', this).trigger('click');
        }
    }
});

Answer 1

您需要检查窗口的宽度，然后将其置于 IF 条件下并检查它是否小于 768，然后单击或悬停。见下面的例子，

$(window).resize(function() {

    var width = $(window).width();

    if( width < 768 ) {

        // click event here

    } else {

        // hover event here

    }

});

试试这个，希望对你有用。

Answer 2

勾选这个Fiddle.这是你想要实现的吗？

function toggleNavbarMethod() {
  if ($(window).width() > 768) {
    $('.navbar .dropdown').on('mouseover', function() {
      $('.dropdown-toggle', this).trigger('click');
    }).on('mouseout', function() {
      $('.dropdown-toggle', this).trigger('click').blur();
    });
  } else {
    $('.navbar .dropdown').off('mouseover').off('mouseout');
  }
}
toggleNavbarMethod();
$(window).resize(toggleNavbarMethod);