ホーム>source

メニューのアンカー項目をクリックした後、メニューを閉じたいのですが、機能しません。 JavaScriptのremoveメソッドが何らかの理由で機能していません。ページを移動してもメニューは閉じますが、インデックスページでは閉じず、開いたままになります。私はまだJavascriptを学んでいるので我慢してください。これが追加のCSSです

ウィズウィズ
ウィズウィズ
ウィズウィズ

const netflix_open_btn = document.querySelector('.netflix-open-btn'); const netflix_close_btn = document.querySelector('.netflix-close-btn'); const netflix_nav = document.querySelectorAll('.netflix-nav'); netflix_open_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') }); }); netflix_close_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') }); });
あなたの答え
  • 解決した方法 # 1

    <a> にイベントリスナーをアタッチする必要があります  素子。

    ウィズウィズ
    
    ウィズウィズ
    
    ウィズウィズ
    

  • 解決した方法 # 2

    そのためには、リンクをクリックするたびに呼び出すことができる関数を作成する必要があります。

    ウィズウィズ
    
    ウィズウィズ
    
    ウィズウィズ
    

  • 解決した方法 # 3

    たぶん、ページの変更がなく、リロードもないので、閉じません。 いくつかのjsを使用して手動で閉じることができます。あなたの例では、アイテムのクリックに関連するクローズ関数はありません。例:

    <前>ウィズウィズ const netflix_open_btn = document.querySelector('.netflix-open-btn'); const netflix_close_btn = document.querySelector('.netflix-close-btn'); const netflix_nav = document.querySelectorAll('.netflix-nav'); const netflix_btns = document.querySelectorAll('.netflix-list a'); netflix_open_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') }); }); netflix_close_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') }); }); var length = netflix_btns.length; for (let x = 0; x < length; x++) { netflix_btns[x].addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') }); }); }

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ javascript - 基礎XYグリッド