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功能，但我似乎无法阻止它，我已尝试使用{{ 1}}并尝试获取父ID并排除它们等等，但我明显遗漏了一些明显的东西！

任何帮助都非常感激（是的，我知道我应该使用jquery .not('.TicketButton')但我现在仍然坚持使用on ......！）

Answer 1

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

Answer 2

正如您所说，您不必使用live，直接将click事件处理程序附加到两个元素并调用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');
});

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

如果单击主包装器，则jQuery显示元素，但如果单击特定元素则不显示

2 个答案: