zoukankan      html  css  js  c++  java
  • Bootstrap5 多级dropdown

    <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;
    }
    
  • 相关阅读:
    宏任务、微任务与Event Loop
    puppteer的使用
    docker的使用 -- windows
    vscode集成eslint
    删除git中无用的大文件
    git 使用
    利用chrome devtool 观察页面占用内存
    JS对象-不可扩展对象、密封对象、冻结对象
    数学
    素数 + 背包
  • 原文地址:https://www.cnblogs.com/ajanuw/p/14334239.html
Copyright © 2011-2022 走看看