jQuery顯示一個元素，如果一個主包裝被點擊，但不是如果一個特定元素被點擊

我有麻煩簡單的菜單隱藏/顯示與jQuery。jQuery顯示一個元素，如果一個主包裝被點擊，但不是如果一個特定元素被點擊

的HTML標記如下：

<div class="content borderRad5" id="mainWrapper"> 

    <div id="ticketControl" class="noPrint blackBoxShadow"> 
     <span id="printThis" class="TicketButton">Print</span> 
     <span id="emailThis" class="TicketButton">Email as Word</span> 
      <div id="emailDoc" class="blackBoxShadow borderRad5"> 
       <div class="underline">Email to:</div> 
       <label>Email</label> 
       <span> 
        <input type="text" class="smallText" /> 
       </span> 
      </div> 
     <span id="wordThis" class="TicketButton">Save as Word</span> 
     <span id="addToLoyalty" class="TicketButton">Add to Account</span> 
     <span id="addNote" class="TicketButton">Add Note</span> 
     <span id="refundThis" class="TicketButton">Refund</span> 
    </div> 

    ---- THE REST OF THE PAGE ---- 

</div>

#ticketControl是包含菜單隱藏的div。當鼠標在.content div內的任何地方點擊時，我希望它滑入視圖。下面的jQuery可以做到這一點。

$('.content').live('click', function() { 
     $('#ticketControl').slideToggle('slow'); 
    });

不過，我有需要點擊#emailThis時滑入鑑於此主菜單#emailDoc內的第2隱藏DIV，顯然這是容易的，但是，我不能再次隱藏菜單停止它。

我意識到爲什麼它這樣做，因爲.content中的任何內容觸發slideToggle函數如上，但我似乎無法阻止它，我試過使用.not('.TicketButton')並試圖獲得父ID和排除它們等上，但我顯然錯過了一些明顯的東西！

任何幫助非常感謝（是的，我知道我應該使用jQuery on但我現在live堅持的......！）

來源

2012-01-30 Jamie Hartnoll

你*有*使用'活'嗎？你是否動態插入元素？一旦點擊'＃emailDoc'，你只需要防止事件冒泡。如果你使用'live'，這可能會很棘手。 – 2012-01-30 10:39:18

實際上我不必使用'live'，不，但我仍然無法使用它。（'＃ticketControl'）。click（function（）{（'＃ticketControl'）。slideToggle（'slow'）; }）;'但它不會讓區別...爲什麼它忽略了「不」？ – 2012-01-30 11:08:21

'.not'正在過濾這組元素。所以你在說：*選擇所有具有「內容」類的元素，並刪除ID爲「ticketControl」*的元素。 – 2012-01-30 11:09:41

至於你說你沒有使用live，直接單擊事件處理程序連接到這兩個元素調用event.stopPropagation()^[docs]防止事件冒泡和觸發其他事件處理程序：

$('.content, #emailThis').click(function(e) { 
    e.stopPropagation(); 
    $(this).children().slideToggle('slow'); 
});

如果你不能像這樣使用事件處理程序，我建議你使用泛型類，它們將元素與他們必須切換的子元素相關聯。例如它應該有這樣的行爲可能有類header的元件，並且都應該被觸發toggle孩子（對不起，我此刻有點缺乏創造性的）：

$('.header').click(function(e) { 
    e.stopPropagation(); 
    $(this).children('.toggle').slideToggle('slow'); 
});

否則，您必須爲幾個元素複製基本相同的行爲，這會降低代碼的可維護性。

來源

2012-01-30 11:12:25

我不明白我的完整標記。 '.content' div中會有更多的負載保留。你的代碼可以工作，但不能在我的情況下工作，因爲我需要顯式聲明哪個元素爲'slide'（即#ticketControl），用你的代碼這樣做給$''content，#emailThis'。（function（e）{ e.stopPropagation（）; $（'＃ticketControl'）。slideToggle（'slow'）; }）;'打破它 – 2012-01-30 11:16:54

@Jamie：然後綁定到單獨的事件處理程序，雖然我會遠離這種硬編碼解決方案。查看我的更新。 – 2012-01-30 11:18:20

啊！好吧，我不希望這樣做，但它會做！謝謝 – 2012-01-30 11:21:56

呼叫event.stopPropagation()在點擊回調函數#emailThis從而使事件不會將DOM冒泡到父元素。

來源

2012-01-30 10:39:41

jQuery顯示一個元素，如果一個主包裝被點擊，但不是如果一個特定元素被點擊

回答

相關問題