首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Bootstrap 4中自动关闭下拉菜单上的子菜单

在Bootstrap 4中,可以使用以下方法来实现自动关闭下拉菜单上的子菜单:

  1. 使用data属性:在父级下拉菜单的<a>标签上添加data-toggle="dropdown"属性,同时在子菜单的<a>标签上添加data-toggle="dropdown"属性。这样点击子菜单时,父级下拉菜单会自动关闭。

示例代码:

代码语言:txt
复制
<div class="dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">子菜单1</a>
    <a class="dropdown-item" href="#">子菜单2</a>
    <a class="dropdown-item" href="#">子菜单3</a>
  </div>
</div>
  1. 使用JavaScript:通过编写自定义的JavaScript代码,监听下拉菜单的事件,并在子菜单被点击时关闭父级下拉菜单。

示例代码:

代码语言:txt
复制
<div class="dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </a>
  <div class="dropdown-menu" id="dropdown-menu">
    <a class="dropdown-item" href="#">子菜单1</a>
    <a class="dropdown-item" href="#">子菜单2</a>
    <a class="dropdown-item" href="#">子菜单3</a>
  </div>
</div>

<script>
  var dropdownMenu = document.getElementById('dropdown-menu');
  var dropdownToggle = document.querySelector('.dropdown-toggle');

  dropdownMenu.addEventListener('click', function(event) {
    event.stopPropagation();
  });

  dropdownToggle.addEventListener('click', function() {
    if (dropdownMenu.classList.contains('show')) {
      dropdownMenu.classList.remove('show');
    } else {
      dropdownMenu.classList.add('show');
    }
  });

  document.addEventListener('click', function() {
    dropdownMenu.classList.remove('show');
  });
</script>

以上是在Bootstrap 4中实现自动关闭下拉菜单上的子菜单的方法。这样可以提升用户体验,使得在点击子菜单时,父级下拉菜单能够自动关闭。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券