Question

我已经添加了一个插件来启动悬停下拉列表，我想禁用原始点击下拉事件处理程序，仅用于启用了悬停下拉列表的下拉列表（data-hover="dropdown"）。

使用

设置点击下拉事件处理程序

$(document).on('click.bs.dropdown', '[data-toggle="dropdown"]', ....

对于同时拥有$.off的元素，如何为此事件仅执行data-hover="dropdown"？如果我把它放在$.off的选择器中则没有效果，因为这不是最初定义选择器的方式。

Answer 1

也许这就是你要找的？ JS Fiddle。 @media带有用于悬停状态的显示块，窗口大小检测用于关闭和打开下拉列表的切换。希望有所帮助。

CSS

@media( min-width: 768px ) {
    .dropdown:hover .dropdown-menu {
        display: block;
    } 
}

JS

$( document ).ready( function () {
    var windowWidth  = $( window ).width()

    $( window ).resize( function () {
      if ( $( this ).width() !== windowWidth ) {
          dropDownFix()
          windowWidth = $( this ).width()
      } 
    })

    function dropDownFix () {
        if ( windowWidth > 768 ) {
            $( ".dropdown-toggle" ).removeAttr( "data-toggle" )
            $( ".dropdown-toggle" ).attr( "aria-expanded", "false" )
            $( ".dropdown" ).removeClass( "open" )
        } else {
            $( ".dropdown-toggle" ).attr( "data-toggle", "dropdown" )
        }
    }
    dropDownFix()  
})

jQuery $ .off不同的选择器到原始

1 个答案: