Foundation、オフキャンバスのすべてのメニューを閉じる

私はFoundation 6を使用していて、キャンバスのメニューをオフにしました。彼らは素晴らしい作品、私は "トレイ1"をクリックして開くと同時にスライドショーをトグルするので、同時に非表示になります。Foundation、オフキャンバスのすべてのメニューを閉じる

しかし、これをさらに拡張して、「トレイ2」という言葉をクリックすると、対応するオフキャンバスメニューが開きますが、他の開いているメニューは閉じます。

これを行うにはどうすればよいですか？

<!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

Foundation、オフキャンバスのすべてのメニューを閉じる

答えて

関連する問題