ドロップダウンメニューのいくつかの実装方法

まず一般的なのがスライドダウンメニューで、CSSでもJSでもできます
親要素によってトリガーされ、子要素が親要素の状態を維持できるのは簡単です.
すべて原生で書かれています.
CSS実現方法:

      
  

    1
    2
    3
  

JS実現方法:

    
  

        
    

      1
      2
      3
    
  

  

    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'
    }
  

2つ目は簡単で、ボタンをクリックして2級メニューをトリガーし、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ファイルを先に導入することに注意してください.