开发者

JQuery accordion: applying unique style to "open" state

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜