Question

我有一些简单的JS可以根据浏览器的宽度删除或添加html。如果它在移动设备中，则应删除属性data-hover。如果宽度在桌面中，则应添加属性。

到目前为止，这很有效，但问题是Bootstrap没有意识到data-hover已被删除。当用户的鼠标离开下拉列表时，下拉列表仍会关闭。要清楚，当窗口浏览器宽度低于768px时，我希望当用户的鼠标离开下拉列表时，下拉列表保持打开状态。

出了什么问题，如何解决这个问题？

JS

$(document).ready(function () {
  $( window ).resize(function() {
    if ($( window ).width() < 768) {
      $('.dropdown-toggle').removeAttr('data-hover');
    } else {
      $('.dropdown-toggle').attr('data-hover', 'dropdown');
    }
  });
});

HTML

<a class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" role="menu" aria-expanded="false" href="/courses">
  Courses               
</a>

<ul class="dropdown-menu courses-dropdown">
  <li>hello</li>                            
</ul>

Answer 1

不是完全删除属性，而是可以将其重新分配给它：

$('.dropdown-toggle').attr('data-hover', '');

如果没有为该属性指定值，则不应执行任何操作。

Answer 2

注意：如果您使用responsibly built dropdown hover plugin，BDD提供的关于将data-hover设置为空字符串的解决方案将会起作用。但是，OP正在使用rather poorly built dropdown hover plugin，这个答案用于管道磁带插件的问题。

data-hover似乎不属于bootstraps下拉列表，而是some guys extension to bootstrap。不幸的是，你和整个社区的人都没有提供破坏他的插件的方法。令我惊讶的是，插件作者从未提供过拆除插件的方法，因为这是导致内存泄漏的严重原因，并且通常只是编程很差。</rant>

为了使事情正确，您将不得不自己手动取消绑定并重新绑定事件。再次，不幸的是你和社区，他没有命名hover事件 - 这也是真正不负责任的插件开发（在内部哭泣）。由于我们将要完成插件作者应该完成的所有这些工作，我们不妨扩展插件并使其看起来好像作者知道他在做什么。请注意，如果页面上的任何其他功能正在向下拉菜单中添加hover个事件，则该功能将会中断（这是因为作者没有命名他的事件）。

$.fn.dropdownHover.disableAll = function () {
    $('[data-hover="dropdown"]').each(function() {
        $(this).off('hover').parent().off('hover').find('.dropdown-submenu').off('hover');
    });
});

$.fn.dropdownHover.enableAll = function () {
    $('[data-hover="dropdown"]').dropdownHover();
});

现在在你的resize事件中你应该做这样的事情：

var $window = $( window );
$(document).ready(function () {
  $window.resize(function() {
    if ($window.width() < 768) {
      $.fn.dropdownHover.disableAll();
    } else {
      $.fn.dropdownHover.enableAll();
    }
  });
});

您可能需要使用上述代码，因为我无法对此进行测试。让我知道它是否有效。因为我们已经完成了所有这些工作，所以如果您在单页应用程序和当前页面上使用此功能，那么您请致电disableAll函数变化即可。这是您可以防止内存泄漏的方法。感谢。

Answer 3

执行此操作，以使下拉菜单显示在桌面上的悬停按钮上，并在移动设备上单击时显示：

使用data-toggle="dropdown"进入上方的下拉菜单：

<a class="dropdown-toggle" data-toggle="dropdown" role="menu" aria-expanded="false" href="www.example.com">
  Parent
</a>
<ul class="dropdown-menu">
  <li>Child 1</li>                            
  <li>Child 2</li>          
  <li>Child 3</li>                            
</ul>

data-toggle="dropdown"将阻止在单击和触摸时重定向到URL。

使用ontouchstart来检测移动浏览器，然后仅在桌面上单击父项（不移动）时强制重定向到URL：

function is_touch_device() {
  return !!('ontouchstart' in window);
}
$(document).ready(function() {
    if(!is_touch_device()) {
        $('a.dropdown-toggle[data-toggle="dropdown"]').click(function (e) {
            window.location.href = $(this).attr('href');
        });
    }
});

在移动设备和桌面设备之间的下拉列表中切换悬停

3 个答案: