代码之家 › 专栏 › 技术社区 › TheWebs

当我点击离开时,Bootstrap 3下拉菜单关闭

twitter-bootstrap jquery

TheWebs · 技术社区 · 6 年前

因此,考虑下面的代码:

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

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

当页面加载时,我实现了我想要的。然而,当我点击页面上的任何地方时,下拉列表关闭。

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

0 回复 | 直到 6 年前

Penny Liu 6 年前

你可以用 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>

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

Bryan Santos · 固定表头与引导

3 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

7 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

7 年前

Alexander David · 折叠卡打开,然后立即再次关闭

7 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

7 年前