Question

在大屏幕上，我希望在悬停时显示下拉菜单，但在移动设备上我希望像手风琴一样安排它们。

我的jQuery与我的CSS冲突。在移动设备上，点击li会产生各种问题：事件会反复触发，如果我调整为较大的视口，则下拉列表仍然处于打开状态，:focus和:hover规则为禁用。

萨斯

// If bigger screen, show the submenu on hover or focus
ul.sub {
  display: none;
}

body.desktop {
  li.dropdown:hover,
  li.dropdown:focus {
    > ul.sub {
      dispay: block;
    }
  }
}

的JavaScript

  if ($('body.desktop').length < 1) {
    $('li.dropdown > a').on('click', function(e){
      $(this).parent().find('.dropdown-menu').slideToggle('fast');
      e.preventDefault();
    });    
  } else {
    return false;
  }

Answer 1

问题是style="display:none;"方法应用的.slideToggle()规则。我需要设计一种方法来覆盖更大的视口。

的JavaScript

  $(window).resize(function(){
    if (window.innerWidth > 795 ) {
      $('.dropdown-menu').removeAttr('style');
    }
  });

然后，要一次又一次地停止事件，hat-tip to this solution：

$("li.dropdown").unbind().click(function() { ... });

单击处理程序会干扰CSS悬停状态

1 个答案: