下拉菜單的若幹種實現方法

先說比較普遍的就是滑動的下拉菜單，可以通過CSS來做，也可以用JS做

都挺簡單的，主要是通過父元素觸發，然後在子元素能夠保持住父元素的狀態。

都是用原生寫的。

CSS實現方法：

<style>
/* 下拉按鈕樣式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 需要定位下拉內容 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉內容 (預設隱藏) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* 下拉菜單的鏈接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 滑鼠移上去後修改下拉菜單鏈接顏色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 在滑鼠移上去後顯示下拉菜單 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 當下拉內容顯示後修改下拉按鈕的背景顏色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">下拉菜單</button>
  <div class="dropdown-content">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
</div>

JS實現方法：

    <style>
        /* 下拉按鈕樣式 */
        .dropbtn {
          background-color: #4CAF50;
          color: white;
          padding: 16px;
          font-size: 16px;
          cursor: pointer;
        }
    
        /* 容器 <div> - 需要定位下拉內容 */
        .dropdown {
          position: relative;
          display: inline-block;
        }
    
        /* 下拉內容 (預設隱藏) */
        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f9f9f9;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }
    
        /* 下拉菜單的鏈接 */
        .dropdown-content a {
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
        }
    
        /* 滑鼠移上去後修改下拉菜單鏈接顏色 */
        .dropdown-content a:hover {
          background-color: #f1f1f1
        }
    
        /* 當下拉內容顯示後修改下拉按鈕的背景顏色 */
        .dropdown:hover .dropbtn {
          background-color: #3e8e41;
        }
      </style>
  <div class="dropdown">
    <button class="dropbtn">下拉菜單</button>
    <div class="dropdown-content">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
    </div>
  </div>

  <script>

    document.getElementsByClassName('dropdown')[0].onmouseover = function () {
      document.getElementsByClassName('dropdown-content')[0].style.display = 'block'
    }
    document.getElementsByClassName('dropdown')[0].onmouseout = function () {
      document.getElementsByClassName('dropdown-content')[0].style.display = 'none'
    }
  </script>

第二種比較簡單，就是點擊按鈕觸發二級菜單，只能通過JS觸發。

document.getElementsByClassName('dropdown')[0].onclick = function () {
      if (document.getElementsByClassName('dropdown-content')[0].style.display == 'block') {
        document.getElementsByClassName('dropdown-content')[0].style.display = 'none'
      } else {
        document.getElementsByClassName('dropdown-content')[0].style.display = 'block'
      }
    }

這個就是做一個判斷，也不難。這個效果是只能來回點擊按鈕，不方便，加一個點擊其他地方也可以取消的方法

 document.getElementsByTagName('body')[0].onclick = function () {
      document.getElementsByClassName('dropdown-content')[0].style.display = 'none'
    }

這個的意思是無論你點body元素的那裡都會去隱藏，但是添加了發現我們沒法通過點擊按鈕來呼出下拉菜單欄了，這是事件捕獲的問題，當我們點擊按鈕的時候，通過冒泡讓我們順帶著點擊了body元素，所以我們其實是呼出了菜單又關閉了菜單。所以我們要阻止事件冒泡。

在按鈕的觸發時，帶一個事件的參數e，然後通過e.stopPropagation() 來阻止冒泡就可以了

document.getElementsByClassName('dropdown')[0].onclick = function (e) {
      e.stopPropagation();
      if (document.getElementsByClassName('dropdown-content')[0].style.display == 'block') {
        document.getElementsByClassName('dropdown-content')[0].style.display = 'none'
      } else {
        document.getElementsByClassName('dropdown-content')[0].style.display = 'block'
      }
    }

但是當頁面複雜的時候，我們也需要點擊其他的任意元素來取消。需要判斷所點的元素是不是按鈕或者下拉菜單的元素，首先通過JQuery的fn來定義一個方法

  jQuery.fn.isChildAndSelfOf = function (b) {
    return (this.closest(b).length > 0) 
  }

這個closest是尋找父元素的，返回被選元素的第一個祖先元素。

詳細可以看文檔：https://www.w3cschool.cn/jquery/traversing-closest.html

然後加上判斷

    $(document).click(function (event) {
      if (!$(event.target).isChildAndSelfOf('.dropdown')) {
        $('.dropdown-content').hide();
      }
    });

這樣就可以完成除了點菜單那裡都現隱藏。不過要註意先引入jquery的js文件。