I found a simple JQuery accordion structure that uses DIV's rather than the typical UL structure.
When you click on the menu DIVS, a specific corresponding panel DIV slides open. How do I make it so that when a panel is open, it's correspondi开发者_C百科ng menu DIV gets a diffent style applied to it?
JS:
$(document).ready(function() {
$("#menu1").data("panelId", "#collapse_about");
$("#menu2").data("panelId", "#collapse_portfolio");
$("#menu3").data("panelId", "#collapse_contact");
$("#menu1, #menu2, #menu3").click(function() {
var first = true;
var panelId = $(this).data("panelId");
$(".class1").not(panelId).slideUp(function() {
if (first) {
first = false;
$(panelId).slideToggle(400);
}
});
});
});
CSS:
.class1 {width:200px; height:200px; border:1px solid black; display:none;}
#collapse_about {background:red; margin-bottom:10px;}
#collapse_portfolio {background:blue; margin-bottom:10px;}
#collapse_contact {background:orange; 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;}
HTML:
<div id="menu1">Menu 1</div>
<div id="collapse_about" class="class1">Content 1</div>
<div id="menu2">Menu 2</div>
<div id="collapse_portfolio" class="class1">Content 2</div>
<div id="menu3">Menu 3</div>
<div id="collapse_contact" class="class1">Content 3</div>
Here is the code on JSFiddle: http://jsfiddle.net/Gaelen/aTR2b/2/
I would really appreciate any help! :)
Here is ur answer:
http://jsfiddle.net/maniator/aTR2b/3/
i added to the css:
.menu_active{ background: grey;}
And to the js:
$("#menu1, #menu2, #menu3").click(function() {
$(".menu_active").removeClass('menu_active');
$(this).addClass('menu_active');
//... rest of the fn
The Menu div will get the style ui-state-active applied to it when it's open. Use that.
精彩评论