[英]Foundation, Close all open off-canvas menus
我正在使用Foundation 6,並介紹了一些非畫布菜單。 它們的效果很好,我單擊“一個紙盤”,它會打開並同時切換幻燈片放映,以便同時隱藏它。
但是,我想進一步擴展此范圍,以便當我單擊“ Tray Two”時,它會打開相應的非畫布菜單,但會關閉任何其他打開的菜單。
我該怎么做呢?
<!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>
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">×</button>
</div>
<div class="callout popup hide" id="popup-2">
<h2>Callout Two</h2>
<button class="close-button popup-close-button" type="button">×</button>
</div>
<div class="callout popup hide" id="popup-3">
<h2>Callout Three</h2>
<button class="close-button popup-close-button" type="button">×</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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.