jQuery 在单击主包装器时显示元素，但在单击特定元素时不显示

Question

我在使用 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');
    });

但是，我在这个主菜单 #emailDoc 中有第二个隐藏的 div，当单击 #emailThis 时需要滑入视图，显然这很容易，但是，我可以'不要阻止它再次隐藏菜单。

我意识到它为什么这样做，因为 .content 中的任何内容都会触发上面的 SlideToggle 函数，但我似乎无法阻止它，我尝试使用 .not('.TicketButton ') 并且还尝试获取父 ID 并排除它们等等，但我显然错过了一些明显的东西！

非常感谢任何帮助（是的，我意识到我应该使用 jquery on 但我现在坚持使用 live...！）

Answer 1

正如您所说，您不必使用 live，直接将单击事件处理程序附加到两个元素并调用 event.stopPropagation() ^[docs] 防止事件冒泡并触发其他事件处理程序：

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

---

如果您无法使用事件处理程序，例如为此，我建议您使用通用类，将元素与其必须切换的子元素关联起来。例如，应该具有这种行为的元素可以具有类 header 和应该切换的子元素 toggle （抱歉，我在moment)：

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

否则，您必须为几个元素重复基本相同的行为，这会降低代码的可维护性。

Answer 2

在 #emailThis 的点击回调函数中调用 event.stopPropagation()，以便事件不会将 DOM 冒泡到父元素。