他の親要素内の要素を選択

Question

クリックした要素の外にある要素をどのように選択するかを知りたい。コード内

<li class="nav-item dropdown"> 
    <a href="javascript;" class="menu-toggle"> 
    <i class="fa fa-server"></i> 
    <span>Server</span> 
    </a> 
    <ul class="dropdown-menu"> 
    <li> 
     <a> 
     <i class="fa fa-home"></i> 
     <span>Item one</span> 
     </a> 
    </li> 
    </ul> 
</li> 

、私は、ユーザーがリンクをトリガするボタンをクリックしたときに、それはそう、それは、リストに「オープン」クラスを追加することで、「ドロップダウン・メニュー」が表示されますようにしたいです-item "nav-itemドロップダウン"

ナビゲーション内に複数のドロップダウンメニューもありますので、ドロップダウンメニューがすべて表示されるように、単に「ドロップダウンメニュー」を選択して表示させることはできません。だからこれを行う方法はありますか？私は要素を選択しようとしましたが、すべてを選択するだけで、私はそれの周りに私の頭を得ることができません。

非常に高く評価されています。

Answer 1

あなたはその後、ちょうどドロップダウンを見つけて、クラスを追加し、closestまたはparentsメソッドを使用して、ターゲットの親を選択することができます$(this).next()DEMO

$('.menu-toggle').click(function(e) { 
    e.preventDefault(); 
    $(this).next('.dropdown-menu').toggleClass('open'); 
}) 

Answer 2

を使用することができます。

例：

$('.menu-toggle').on('click', function() { 
    e.preventDefault(); 

    $(this).closest('.nav-item dropdown').find('.dropdown-menu').toggleClass('open'); 
}); 

Answer 3

バニラJSソリューション

document.querySelectorAll('.menu-toggle').forEach(element => { 
    element.addEventListener('click', event => { 
     event.preventDefault(); 
     element.parentNode.querySelector('.dropdown-menu').classList.toggle('open'); 
    }); 
}); 

JSFiddleデモ：https://jsfiddle.net/hp1debw7/1/