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;
    }
    
  • 相关阅读:
    Insert into a Binary Search Tree
    Search in a Binary Search Tree
    Binary Search Tree Iterator
    Validate Binary Search Tree
    Serialize and Deserialize Binary Tree
    图的搜索
    codeforce vk cup2017
    hdu1160dp
    完全背包hdu1114
    最长递增子序列hdu1087
  • 原文地址:https://www.cnblogs.com/ajanuw/p/14334239.html
Copyright © 2011-2022 走看看