Question

我找到了一个简单的JQuery手风琴结构，它使用DIV而不是典型的UL结构。

单击菜单 DIVS时，会打开一个特定的相应面板 DIV。如何制作面板，当面板打开时，相应的菜单 DIV会应用不同的样式？

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>

以下是JSFiddle上的代码：http://jsfiddle.net/Gaelen/aTR2b/2/

我真的很感激任何帮助！：）

Answer 1

这是你的答案：

http://jsfiddle.net/maniator/aTR2b/3/

我加入了css：

.menu_active{ background: grey;}

和js：

$("#menu1, #menu2, #menu3").click(function() {
    $(".menu_active").removeClass('menu_active');
    $(this).addClass('menu_active');
    //... rest of the fn

Answer 2

菜单div将在打开时获得应用于它的样式ui-state-active。使用它。

JQuery手风琴：将独特风格应用于“开放”状态

2 个答案: