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;
    }
    
  • 相关阅读:
    Restful API
    Vue之指令
    Scrapy框架
    爬虫提高性能:串行、线程进程、异步非阻塞
    MongoDB
    Beautifulsoup模块
    请求库之selenium
    php 正则匹配中文
    Javascript的"预编译"思考
    PHP程序员面试技巧之口试题分享
  • 原文地址:https://www.cnblogs.com/ajanuw/p/14334239.html
Copyright © 2011-2022 走看看