Question

我为我正在处理的网络应用编写了一个自定义下拉列表，我有一套特定的功能，我想用它完成。首先，如果您将鼠标从菜单上移开，我希望下拉列表保持打开状态。当您重新单击下拉标题，单击下拉列表中的某个元素或单击页面上的任何其他位置时，我希望它关闭。如果元素太多，我还需要在下拉项列表中启用滚动条。我们使用标准分辨率，所以我用max-height属性完成了这个。保持菜单打开的方法是在.bulr（）事件时给菜单按钮焦点并关闭菜单项。当用户单击滚动条并关闭菜单时，问题是.blur（）触发。我有一个我在这里创建的菜单示例：http://codepen.io/jiggawagga/pen/wmkEG 我发现的一个奇怪的事情就是在我正在使用的应用程序中的谷歌浏览器中，您可以单击滚动条并且菜单保持打开状态，但是在Internet Explorer中它不会。另一个奇怪的事情是Codepen.io中的示例与应用程序具有完全相同的代码，但它不会在Chrome中保持打开状态。（我真的不关心其他浏览器这是一个内部应用程序，我们只针对IE 8（bleh）和Chrome，因为公司标准）下面是我用来处理菜单的Javascript和HTML。（同样，完整代码和工作示例位于上面的codepen.io链接中）

<div id="container">
<div id="group-dropdown">
  <a href="#" id="group-dropdown-title">
    GROUP NAME <span id="group-dropdown-indicator-arrow" class="arrow arrow-down"></span>
  </a>
  <div id="group-dropdown-item-container">
    <div class="group-dropdown-item" data-bind="1234567">
        <a href="#">
          <span class="group-dropdwon-item-name">GROUP 2 NAME</span>
          <br />
          <span style="color: #daa520;">INPROGRESS</span>
          <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
          <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
        </a>
    </div>
    <div class="group-dropdown-item" data-bind="1651651">
        <span class="group-dropdwon-item-name">GROUP 3 NAME</span>
        <br />
        <span style="color: green;">ACTIVE</span>
        <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
        <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
    </div>
    <div class="group-dropdown-item" data-bind="1651651">
        <span class="group-dropdwon-item-name">GROUP 3 NAME</span>
        <br />
        <span style="color: green;">ACTIVE</span>
        <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
        <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
    </div>
    <div class="group-dropdown-item" data-bind="1651651">
        <span class="group-dropdwon-item-name">GROUP 3 NAME</span>
        <br />
        <span style="color: green;">ACTIVE</span>
        <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
        <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
    </div>
    <div class="group-dropdown-item" data-bind="1651651">
        <span class="group-dropdwon-item-name">GROUP 3 NAME</span>
        <br />
        <span style="color: green;">ACTIVE</span>
        <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
        <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
      </div>
    <div class="group-dropdown-item" data-bind="1651651">
        <span class="group-dropdwon-item-name">GROUP 3 NAME</span>
        <br />
        <span style="color: red;">TERMINATED</span>
        <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
        <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
      </div>
    </div>
</div>
</div>

var _menuOpen = false;
$('#group-dropdown-title').click(function () {
            if (_menuOpen) {
                $('#group-dropdown-title').blur();
                $('#group-dropdown-title').removeClass('hovered');
                $('#group-dropdown-item-container').hide();
                flipArrow('down');
                _menuOpen = false;
            }
            else {
                $('#group-dropdown-title').focus();
                $('#group-dropdown-title').addClass('hovered');
                $('#group-dropdown-item-container').show();
                flipArrow('up');
                _menuOpen = true;
            }
        });

        $('#group-dropdown-title').blur(function (e) {
                $('#group-dropdown-title').removeClass('hovered');
                $('#group-dropdown-item-container').hide();
                flipArrow('down');
                _menuOpen = false;
        });

function flipArrow(direction) {
    if (direction.toLowerCase() === 'up') {
        $('#group-dropdown-indicator-arrow').removeClass('arrow-down');
        $('#group-dropdown-indicator-arrow').addClass('arrow-up');
    } else if (direction.toLowerCase() === 'down') {
        $('#group-dropdown-indicator-arrow').removeClass('arrow-up');
        $('#group-dropdown-indicator-arrow').addClass('arrow-down');
    }
}

Answer 1

我建议您不要在.blur()事件.click()上执行.group-dropdown-item事件，而不是这样做：

$('.group-dropdown-item').click(function (e) {
   $('#group-dropdown-title').removeClass('hovered');
   $('#group-dropdown-item-container').hide();
   flipArrow('down');
   _menuOpen = false;
});

<强>更新

$('#group-dropdown-title').click(function () {
    if (_menuOpen) {
        $('#group-dropdown-item-container').blur();
        flipArrow('down');
        _menuOpen = false;
    } else {
        $('#container').addClass('clickClose');
        $('#group-dropdown-title').addClass('hovered');
        $('#group-dropdown-item-container').show();
        $('#group-dropdown-item-container').focus();
        flipArrow('up');
        _menuOpen = true;
    }
});

$('.group-dropdown-item').click(function (e) {
    $('#group-dropdown-item-container').blur();
    //add menu item action here
    flipArrow('down');
    _menuOpen = false;
});

$('#group-dropdown-item-container').blur(function (e) {
    if (_menuOpen) {
        $('#container').removeClass('clickClose');
        $('#group-dropdown-title').removeClass('hovered');
        $('#group-dropdown-item-container').hide();
        flipArrow('down');
        _menuOpen = false;
    }
});

$('html, body, #container, #group-dropdown').click(function (e) {
    if (_menuOpen) {
        $('#group-dropdown-item-container').blur();
    }
}).children().click(function (e) {
    return false;
});

CodePen

防止单击滚动条触发.blur

1 个答案: