首页 > 其他 > 详细

Bootstrap5 多级dropdown

时间:2021-01-27 14:45:41      阅读:117      评论:0      收藏:0      [点我收藏+]

技术分享图片

<div class="dropdown">
  <a class="btn dropdown-toggle"> Dropdown link </a>
  <ul class="dropdown-menu">
    <div class="dropdown-item dropdown">
      <a class="btn dropdown-toggle"> Dropdown link </a>
      <ul class="dropdown-menu">
        <div class="dropdown-item dropdown">
          <a class="btn dropdown-toggle"> Dropdown link </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item">Action</a></li>
            <li><a class="dropdown-item">Another action</a></li>
            <li>
              <a class="dropdown-item">Something else here</a>
            </li>
          </ul>
        </div>
      </ul>
    </div>
  </ul>
</div>
document.querySelectorAll(‘.dropdown .dropdown-toggle‘).forEach((a) => {
  let dropdown: bootstrap.Dropdown;
  a.addEventListener(‘click‘, (e) => {
    const show = a.classList.contains(‘show‘);
    if (show) {
      a.classList.remove(‘show‘);
      dropdown.hide();
    } else {
      a.setAttribute(‘data-bs-toggle‘, ‘dropdown‘);
      dropdown.show();
      a.removeAttribute(‘data-bs-toggle‘);
    }
  });
  dropdown = new bootstrap.Dropdown(a);
});
.dropdown.dropdown-item:active {
  background-color: inherit;
}

Bootstrap5 多级dropdown

原文:https://www.cnblogs.com/ajanuw/p/14334239.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!