Question

为什么这不起作用？我想如果在打开时向触发器添加类名，然后如果单击现在具有此类名的触发器......我们可以关闭它。

// Menu trigger
$('.menu-trigger').on('click', function(e) {
    e.preventDefault();
    $('.menu-container').fadeIn('fast');
    $(this).addClass('open');
});
$('.menu-trigger.open').on('click', function(e) {
    e.preventDefault();
    $('.menu-container').fadeOut('fast');
    $(this).removeClass('open');
});

Answer 1

活动委派：

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

 $('parentselector').on('click','childselector',//callbackfunction()

这里，document只是作为菜单类的父类。它用于指定.menu-trigger，.menu-trigger.open是文档中的单个元素，而on('click'用于动态创造了元素。

$(document).on('click','.menu-trigger' function(e) {
    e.preventDefault();
    $('.menu-container').fadeIn('fast');
    $(this).addClass('open');
});
$(document).on('click','.menu-trigger.open' ,function(e) {
    e.preventDefault();
    $('.menu-container').fadeOut('fast');
    $(this).removeClass('open');
});

Answer 2

将事件 delegation 用于动态添加元素

$(document).on('click',".menu-trigger.open", function(e) {
    e.preventDefault();
    $('.menu-container').fadeOut('fast');
    $(this).removeClass('open');
});

事件委托允许我们将单个事件监听器附加到父元素，将为匹配a的所有后代触发选择器，无论这些后代现在存在还是被添加到将来

Answer 3

你的代码不起作用的原因是你有两个独立的处理程序，如果元素有.open类，它们都将触发，因为处理程序中的两个选择器都适用。所以，你可以做几件事：

为.menu-trigger写一个处理程序，并使用if语句检查.open类是否存在，例如if（$（this）.hasClass（'open'））。如果为true，请执行fadeOut，如果为false则执行fadeIn。
像你一样编写两个处理程序，但是在第一个选择器中专门用.open类排除元素，如下所示：$（'。menu-trigger：not（.menu-trigger.open）'）...
删除菜单触发器类并添加类菜单触发器关闭，然后您将有两个单独的处理程序：一个用于$（'menu-trigger'），另一个用于$（'menu-trigger-close' ）。
或者，我认为最好的方法是使用fadeToggle方法。它为您完成所有工作。它检查元素是否已经可见并将其淡出，反之亦然。因此，您不必添加任何其他类来跟踪。

最简单的方法：http://api.jquery.com/fadeToggle/

如果您只想在fadeIn和fadeOut之间切换，请使用fadeToggle方法：

$('.menu-trigger').on('click', function(e) {
    e.preventDefault();
    $('.menu-container').fadeToggle('fast');
});

jQuery .on（）和添加类

3 个答案:

最简单的方法：http://api.jquery.com/fadeToggle/