JQuery手风琴：恢复到以前的“闭合”状态
我使用的是一种简单的JQuery手风琴，它使用DIV而不是典型的UL结构。
单击菜单DIV时，将打开特定的相应面板DIV。
菜单DIV的样式更改（变为灰色）以显示它处于活动状态。
当您再次单击它时，面板DIV将关闭。
当发生这种情况时，我希望菜单DIV恢复到之前的风格。
目前它只是保持灰色。
有人可以帮忙吗？
这是JSFiddle上的代码：http：//jsfiddle.net/Gaelen/aTR2b/6/
JavaScript的：
$(document).ready(function() {
$("#menu1").data("panelId", "#collapse_photography");
$("#menu2").data("panelId", "#collapse_fineart");
$("#menu3").data("panelId", "#collapse_architecture");
$("#menu4").data("panelId", "#collapse_graphdesign");
$("#menu5").data("panelId", "#collapse_infographics");
$("#menu6").data("panelId", "#collapse_3dviz");
$("#menu1, #menu2, #menu3, #menu4, #menu5, #menu6").click(function() {
$(".menu_active").removeClass('menu_active');
$(this).addClass('menu_active');
var first = true;
var panelId = $(this).data("panelId");
$(".class1").not(panelId).slideUp(function() {
if (first) {
first = false;
$(panelId).slideToggle(400);
}
});
});
});
.class1 {width:200px; height:200px; border:1px solid black; display:none;}
.menu_active{ background: grey;}
#collapse_photography {background:red; margin-bottom:10px;}
#collapse_fineart {background:red; margin-bottom:10px;}
#collapse_architecture {background:red; margin-bottom:10px;}
#collapse_graphdesign {background:red; margin-bottom:10px;}
#collapse_infographics {background:red; margin-bottom:10px;}
#collapse_3dviz {background:red; margin-bottom:10px;}
#menu1 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;}
#menu2 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;}
#menu3 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;}
#menu4 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;}
#menu5 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;}
#menu6 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;}
<div id="menu1"><a href="#">Photography</a></div>
<div id="collapse_photography" class="class1">Content 1</div>
<div id="menu2">Fine Art</div>
<div id="collapse_fineart" class="class1">Content 2</div>
<div id="menu3">Architecture</div>
<div id="collapse_architecture" class="class1">Content 3</div>
<div id="menu4">Graphic + Web Design</div>
<div id="collapse_graphdesign" class="class1">Content 4</div>
<div id="menu5">Information Graphics</div>
<div id="collapse_infographics" class="class1">Content 5</div>
<div id="menu6">3D Visualisation</div>
<div id="collapse_3dviz" class="class1">Content 6</div>
没有找到相关结果
已邀请:
1 个回复
细屠截殴些
$(".menu_active").not(this).removeClass('menu_active'); $(this).toggleClass('menu_active');