コンテナを横断する要素をクリックしてください

Question

今、私にはたくさんのトリガとターゲットがあります。 spanをクリックすると、次のdivにはクラスが表示されます。ここユニークなケースがトリガースリーが実際に今div外ul

<ul> 
    <li> 
     <span class="trigger">Trigger 1</span> 
     <div class="target">Target to reveal when I press Trigger 1</div> 
    </li> 
    <li> 
     <span class="trigger">Trigger 2</span> 
     <div class="target">Target to reveal when I press Trigger 2</div> 
    </li> 
    <li> 
     <span class="trigger">Trigger 3</span> 
    </li> 
</ul> 

<div class="target">Target to reveal when I press Trigger 3</div> 

を対象とすべきであるということです、私のjQueryのは、このようになります。

var trigger = ".trigger"; 
var recipient = ".target"; 

$(trigger).click(function(e) { 
    e.stopPropagation(); 
    if ($(recipient).hasClass("open")){ 
    $(trigger).not(this).next(recipient).removeClass("open"); 
    } 
    if($(trigger).hasClass("active")){ 
    $(trigger).not(this).removeClass("active"); 
    } 
    $(this).next(recipient).toggleClass("open"); 
    $(this).toggleClass("active"); 
}); 

私の質問は、二人はここでフォールドさ：

A）私はとオーバー次div

Bを含有するul外に横断するトリガー3用のクリックイベントを取得できますか）idなどを使用して、ターゲットとトリガーをより賢明にバインドする方法はありますか？ labelの場合、forを使用してinputのIDをターゲットに設定することができます。 jQueryに相当するものはありますか？

Answer 1

私はあなたのHTMLを次のように変更になるだろう、あなたの設計アプローチに続いて今度はそのようなイベントリスナー内、いくつかのより容易なコーディングにつながる

<ul> 
    <li> 
     <span class="trigger" data-target-id="target-1">Trigger 1</span> 
     <div id="target-1" class="target">Target to reveal when I press Trigger 1</div> 
    </li> 
    <li> 
     <span class="trigger" data-target-id="target-2">Trigger 2</span> 
     <div id="target-2" class="target">Target to reveal when I press Trigger 2</div> 
    </li> 
    <li> 
     <span class="trigger" data-target-id="target-3">Trigger 3</span> 
    </li> 
</ul> 

<div id="target-3" class="target">Target to reveal when I press Trigger 3</div> 

：

var trigger = ".trigger"; 
var recipient = ".target"; 

$(trigger).click(function(e) { 
    e.stopPropagation(); 
    recipient = '#' + $(this).attr('data-target-id'); 

    /* - Code that modifies classes down here - */ 

}); 

Answer 2

することができます使用：

var target = $(this).next(recipient); 
if (target.length == 0) { // reached the end of this div 
    target = $(this).closest('ul').next(recipient); 
} 
target.toggleClass("open");