Question

我正在尝试制作一个菜单，但我在关闭菜单时遇到问题，这些菜单在打开新菜单时会打开。

我尝试了hide()但它似乎并不适用于所有实例，在我尝试任何结算方法之前，这是我的代码。

我希望任何时候都只能打开这3个功能中的一个。

当一个人打开时 - 任何已经打开的人都应该反转他们打开的任何东西。

//Open/close filters pack menu
$('#filters__menu--show').click(function () {
    $('#filters__menu').slideToggle('750',"swing", function () {
    });
});
//Open/close stickers pack menu
$('#stickers__menu--show').click(function () {
    $('#stickers__section').slideToggle('750',"swing", function () {
    });
});
//draw row + menu open
$('#draw__menu--show').click(function () {
    $('#draw__colors').slideToggle('750',"swing", function () {
    });
    //when draw is open close primary save/restart
    $("#done").fadeOut('750');
    $("#restart").fadeOut('750');
    $("#app__menu").fadeOut('750');
    $("#draw__menu").fadeIn('750');
});

我想要实现的是当打开新菜单时，其他菜单关闭/他们打开的所有菜单都被颠倒。

我在＃draw__menu中遇到了特殊问题 - 因为它会执行slideToggles和fadeOut其他元素。

hide（）是正确的方法吗？

Answer 1

引入三个布尔变量：isFiltersOpen，isStickersOpen，isDrawMenuOpen。将它们初始化为false。在每个回调中，将相应的一个设置为与其自身相反。例如。 isFilterOpen=!isFilterOpen。

然后再次为两个OTHER元素中的每一个调用slideToggle。在内部slideToggle的回调中，确保反转布尔值。例如，这将是filters_menu的slideToggle代码：

$('#filters__menu--show').click(function () {
    $('#filters__menu').slideToggle('750',"swing", function () {
     isFilterOpen=!isFilterOpen;
     if(isStickersOpen){
     $('#stickers__section').slideToggle('750',"swing", function () {
      isStickersOpen=!isStickersOpen;
     }
    );
    }
     if(isDrawMenuOpen){
     $('#draw__colors').slideToggle('750',"swing", function () {
      isDrawMenuOpen=!isDrawMenuOpen;
     }
    );
    }
});
})

为每个人做这件事。为了使它更优雅，你可以将一些代码包装在函数中

Answer 2

你可以像@Barmar建议的那样做。为点击时要关闭的所有元素添加公共类，然后添加结束效果（hide()或slideUp或...）。您可以测试一下，看看哪一个最符合您的愿景。这是一个示例（我使用slideUp()来保留动画，但如果你想要没有动画，你可以使用hide()）：https://jsfiddle.net/sk4m2w2d/2/

打开新的div时关闭open div

2 个答案: