文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将Hover事件更改为在媒体查询768 (Navbar)中单击事件

问如何将Hover事件更改为在媒体查询768 (Navbar)中单击事件
EN

Stack Overflow用户

提问于 2017-05-14 05:57:08

回答 2查看 1K关注 0票数 1

在我的导航中有一个子页面，我使用这段代码选项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');
});

我的网站是在引导3、wordpress和我的导航中建立的，我使用肚脐步行者

希望你能帮我解决我在移动设备导航栏上的问题。谢谢

我找到了解决我的问题的方法

在桌面视图中，当您悬停父Nav时，Sub页面将显示；在移动设备视图中，Sub页面只在单击父Nav时显示。

贷给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');
        }
    }
});

jquery

html

css

wordpress

twitter-bootstrap

回答 2

Stack Overflow用户

发布于 2017-05-14 06:04:20

您需要检查窗口的宽度，并将其置于IF状态，并检查其是否小于768，否则请执行悬停操作。见下面的例子，

$(window).resize(function() {

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

    if( width < 768 ) {

        // click event here

    } else {

        // hover event here

    }

});

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

票数 0

Stack Overflow用户

发布于 2017-05-14 08:23:42

检查一下这个小提琴。，这是你想要实现的吗？

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43960812

复制

相似问题

问如何将Hover事件更改为在媒体查询768 (Navbar)中单击事件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将Hover事件更改为在媒体查询768 (Navbar)中单击事件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将Hover事件更改为在媒体查询768 (Navbar)中单击事件
EN