[英]Jquery Accordion Automatic close
I'm working on creating a mobile accordion nav for a website. 我正在为网站创建移动手风琴导航。 I have a basic accordion set up, the problem I am having is when I open one tab I want the other tabs to automatically close so only one tab can be opened at once. 我已经设置了基本的手风琴,但是我遇到的问题是当我打开一个选项卡时希望其他选项卡自动关闭,因此一次只能打开一个选项卡。 Here is the code 这是代码
$(document).ready(function() {
// Collapsible Menu
function accordion(trigger) {
//variables
var $button = $(trigger),//trigger firing the event
visible = true;//flag for wayfinding
$button.hover().css({'cursor': 'pointer'});
//event
$button.click(function() {
//conditional check
if ( ! visible ) {
$button.removeClass('active');
$('.panel-title .icon').html('⊕');
$(this).next().slideUp('slow',function() {
$(this).addClass('visuallyhidden').slideDown(0);
$('.panel-content').attr( 'aria-expanded','false' );
});
}else {
$button.addClass('active');
$('.panel-title.active .icon').html('⊗');
$(this).next().slideUp(0,function() {
$('.panel-content').attr( 'aria-expanded','true' );
$(this).removeClass('visuallyhidden').slideDown('slow');
});
}
//flag dude
visible = !visible;
return false
});
}
//call to widget trigger1
accordion('#trigger1');
//call to widget trigger2
accordion('#trigger2');
//call to widget trigger3
accordion('#trigger3');
Codepen link - http://codepen.io/Ahhmmogh/pen/WvMMZN Codepen链接- http://codepen.io/Ahhmmogh/pen/WvMMZN
Any help would be greatly appreciated. 任何帮助将不胜感激。
Here's a working codepen: http://codepen.io/alezuc/pen/OVQvMV 这是一个有效的Codepen: http ://codepen.io/alezuc/pen/OVQvMV
I've added a check on panel's visibility and on 'active' title 我添加了关于面板可见性和“活动”标题的检查
if ( $(this).find('.panel-content').css('display') == 'none' ) {...}
if ( $(this).hasClass('active') ) {...}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.