打開新窗口時關閉打開的divs

我正在嘗試創建菜單，但我遇到了打開新窗口時打開的菜單的問題。打開新窗口時關閉打開的divs

我試過hide()，但它似乎並沒有在所有情況下工作，這是我的代碼之前，我已經嘗試過任何關閉方法。

我只希望在任何時候打開這三個函數中的一個。

當一個打開 - 任何已打開的應該反轉他們打開的任何東西。

//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其他元素。

隱藏（）正確的方式來解決這個問題？

來源

2017-02-13 GoldenGonaz

你也可以發佈你的html嗎？ – Armin

給所有的菜單一個普通的類。然後你可以使用'$（「。className」）。hide（）;'在顯示當前菜單之前隱藏所有其他菜單。 – Barmar

@Barmar ...和'$（this）.show（）;'顯示當前的！ –

引入三個布爾變量：isFiltersOpen，isStickersOpen，isDrawMenuOpen。將它們初始化爲false。在每個回調中，將相應的一個設置爲相反。例如。 isFilterOpen=!isFilterOpen。

然後再次爲其他兩個元素調用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; 
    } 
    ); 
    } 
}); 
})

對每一個都這樣做。爲了使它更優雅，你可以將一些代碼包裝在一個函數中

來源

2017-02-13 20:15:22

你可以像@Barmar建議的那樣做。爲點擊時要關閉的所有元素添加一個通用類，然後添加關閉效果（hide()或slideUp或...）。你可以測試幾個，看看哪一個最適合你的願景。這裏是一個例子（我使用slideUp()來保持動畫，但如果你想不動畫，你可以使用hide()）：https://jsfiddle.net/sk4m2w2d/2/

來源

2017-02-14 10:54:05 Armin

打開新窗口時關閉打開的divs

回答

相關問題