当我单击离开时,Bootstrap 3下拉列表关闭

时间:2019-03-11 23:34:08

标签: jquery twitter-bootstrap

因此请考虑以下代码:

$(document).ready(function () {
    $('#dropdownMenu1').attr('aria-expanded', true);
    $('.dropdown').addClass('open');
    $('#dropdownMenu1').on('hide.bs.dropdown', function () {
        return false;
    });
});

这是我正在维护的旧版应用程序,引导程序下拉菜单必须保持打开状态。

页面加载后,我实现了我想要的。但是,当我单击页面上的任意位置时,下拉列表都会关闭。

这不是在页面加载时使其保持打开状态的正确方法吗?

1 个答案:

答案 0 :(得分:2)

您可以像这样使用hide.bs.dropdown事件:

$('#dropdownMenu1').addClass('open');
$('#dropdownMenu1').on({
  "hide.bs.dropdown": function() {
    return $(this).attr('closable') == 'true';
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="dropdown" id="dropdownMenu1">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>