リンクをクリックするとメニューが閉じます

リンクをクリックするとメニューが閉じます。私のコードがうまくいかない理由がありますか？ jsbin リンクをクリックするとメニューが閉じます

document.getElementById("menu").addEventListener("click",function(e) { 
 
    if(e.target && e.target.nodeName == "LI") { 
 
    console.log("ok"); 
 
    menu.style.display = "none"; 
 
    } 
 
});

<ul class="nav__right" id="menu"> 
 
    <li> 
 
    <h3><a href="#home">home</a></h3> 
 
    </li> 
 
    <li> 
 
    <h3><a href="#about">À propos</a></h3> 
 
    </li> 
 
    <li> 
 
    <h3><a href="#production">Réalisations</a></h3> 
 
    </li> 
 
    <li> 
 
    <h3><a href="#contact">Contact</a></h3> 
 
    </li> 
 
</ul>

出典

2017-02-25 DenisMasot

あなたはそれをクリックしたかどう 'li'要素を非表示にしたいですか？ –

'e.stopPropagation（）;を試してください – Fr33d0m

@ Fr33d0m条件が満たされていないという問題があります。 –

e.target.nodeName戻りAあなたはLIとそれを比較しているのに対し。クリックされた要素の

document.getElementById("menu").addEventListener("click",function(e) { 
 
    console.log(e.target.nodeName); 
 
    if(e.target && e.target.nodeName == "A") { 
 
    console.log("ok"); 
 
    this.style.display = "none"; 
 
    } 
 
});

<ul class="nav__right" id="menu"> 
 
    <li> 
 
    <h3><a href="#home">home</a></h3> 
 
    </li> 
 
    <li> 
 
    <h3><a href="#about">À propos</a></h3> 
 
    </li> 
 
    <li> 
 
    <h3><a href="#production">Réalisations</a></h3> 
 
    </li> 
 
    <li> 
 
    <h3><a href="#contact">Contact</a></h3> 
 
    </li> 
 
</ul>

出典

2017-02-25 11:41:08 vatz88

次の2つの愚かなミスを持っています。まず、menuは未定義の変数です。あなたは明らかにdocument.getElementById('menu')を意味しました。最後に、nodeNameメソッドは "LI"ではなく "A"を返します。

document.getElementById("menu").addEventListener("click",function(e) { 
 
    if(e.target && e.target.nodeName == "A") { 
 
    console.log("ok"); 
 
    this.style.display = "none"; 
 
    } 
 
});

<ul class="nav__right" id="menu"> 
 
    <li> 
 
    <h3><a href="#home">home</a></h3> 
 
    </li> 
 
    <li> 
 
    <h3><a href="#about">À propos</a></h3> 
 
    </li> 
 
    <li> 
 
    <h3><a href="#production">Réalisations</a></h3> 
 
    </li> 
 
    <li> 
 
    <h3><a href="#contact">Contact</a></h3> 
 
    </li> 
 
</ul>

出典

2017-02-25 11:26:44

'document.getElementById（" menu "）'を2回実行する必要はありません。 'this.style.display = 'none''が行います。 – Fahmi

あまりにもうまく動作します。コードを編集しました。ありがとうございました。 –

あなたがHTML

<li> 
     <h3><a href="#home">home</a></h3> 
</li>

を見ればあなたの条件はactuallly間違っている：ここでは修正されたコードです。 LIをチェックするだけです。クリックがどこにあっても、リンク上（A）または行全体（H3）になることがあります。

document.getElementById("menu").addEventListener("click",function(e) { 

if((e.target) && (e.target.nodeName == "LI" || e.target.nodeName == "H3" ||e.target.nodeName == "A")){ 
    console.log("ok"); 
    this.style.display = "none"; 
} 
});

DEMO

出典

2017-02-25 11:27:12

'document.getElementById（" menu "）'を2回行う必要はありません。 'this.style.display = 'none''が行います。 @Fahmi True。 – Fahmi

ペーストされたOPコードをコピーするだけです。ありがとう。修正された、 –

<ul class="nav__right" id="menu"> 
    <li> 
    <h3><a href="#home">home</a></h3> 
    </li> 
    <li> 
    <h3><a href="#about">À propos</a></h3> 
    </li> 
    <li> 
    <h3><a href="#production">Réalisations</a></h3> 
    </li> 
    <li> 
    <h3><a href="#contact">Contact</a></h3> 
    </li> 
</ul> 

$(function() { 
    var sf_menu_sub = $('.nav__right'); 
    $('.nav__right').on('click', function (e) { 
     e.stopPropagation(); 
     sf_menu_sub.hide(); 
    }); 
    $(document).on('click', function (e) { 
     sf_menu_sub.hide(); 
    }); 
});

出典

2017-02-25 11:33:01

.nodeNameはAあるLIの子供はあなたがこのようにそれを一致させることができますH3の子：

e.target.parentNode.parentNode.nodeName == "LI"

することができますまた、追加チェックを追加する場合は

e.target.parentNode.nodeName == "H3"
e.target.nodeName == "A"

出典

2017-02-25 11:44:01

リンクをクリックするとメニューが閉じます

答えて

関連する問題