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);

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

2 个答案: