基金會，關閉所有打開的畫布菜單

我正在使用Foundation 6並引入了一些非畫布菜單。他們工作得很好，我點擊「Tray One」，它會打開並同時切換幻燈片，讓它同時隱藏。基金會，關閉所有打開的畫布菜單

但我想進一步擴大這一點，以便當我說點擊「塔上兩」，它會打開相應的關閉帆布菜單，但關閉任何其他打開的菜單。

我該如何去做這件事？

<!doctype html> 
<html class="no-js" lang="en" dir="ltr"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/6.2.2/css/app.css"> 
</head> 
<body zf-close-all> 

    <nav data-mainbar role="navigation"> 
    <ul class="dropdown menu bg" data-dropdown-menu> 
     <!-- These data-toggles need to close any other open menus on click? --> 
     <li class="has-submenu"><a href="#" data-toggle="one_tray slideshow">Tray One</a></li> 
     <li class="has-submenu"><a href="#" data-toggle="two_tray slideshow">Tray Two</a></li> 
     <li class="has-submenu"><a href="#" data-toggle="three_tray slideshow">Tray Three</a></li> 
    </ul> 
    </nav> 

    <div class="off-canvas-content tray" data-off-canvas-content=""> 
    <div id="one_tray" class="toggle tray_item hide" data-toggler=".hide" data-transition="push" aria-expanded="true"> 
     <p>Tray One</p> 
    </div> 
    <div id="two_tray" class="toggle tray_item hide" data-toggler=".hide" data-transition="push" aria-expanded="true"> 
     <p>Tray Two</p> 
    </div> 
    <div id="three_tray" class="toggle tray_item hide" data-toggler=".hide" data-transition="push" aria-expanded="true"> 
     <p>Tray Three</p> 
    </div> 
    </div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/6.2.2/js/app.js"></script> 
</body> 
</html>

來源

2017-04-13 Stuart

你能提供一個工作代碼..所以我可以檢查 –

我已經修訂，包括完整的工作CDN例子。 – Stuart

我認爲你必須在這裏使用自定義jquery –

http://codepen.io/andycochran/pen/yedGeL

<div class="row"> 
    <div class="columns large-5"> 
    <button class="button popup-button" data-popup="popup-1">Callout 1</button> 
    <button class="button popup-button" data-popup="popup-2">Callout 2</button> 
    <button class="button popup-button" data-popup="popup-3">Callout 3</button> 
    </div> 
    <div class="columns large-7"> 
    <div class="callout popup hide" id="popup-1"> 
     <h2>Callout One</h2> 
     <button class="close-button popup-close-button" type="button">&times;</button> 
    </div> 
    <div class="callout popup hide" id="popup-2"> 
     <h2>Callout Two</h2> 
     <button class="close-button popup-close-button" type="button">&times;</button> 
    </div> 
    <div class="callout popup hide" id="popup-3"> 
     <h2>Callout Three</h2> 
     <button class="close-button popup-close-button" type="button">&times;</button> 
    </div> 
    </div> 
</div> 

<script> 
$('.popup-button').click(function() { 
    $('.popup').addClass('hide'); 
    var thePopup = jQuery(this).data('popup'); 
    $('#'+thePopup).removeClass('hide'); 
}); 

$('.popup-close-button').click(function() { 
    $('.popup').addClass('hide'); 
}); 
</script>

來源

2017-04-15 08:40:36 Stuart

這是更好的，但它不會關閉時，再次單擊相同的彈出式按鈕鏈接。 – Stuart

基金會，關閉所有打開的畫布菜單

回答

相關問題