JQuery гармошка: применение уникального стиля к «открытому» состоянию - PullRequest
Новая
       9

JQuery гармошка: применение уникального стиля к «открытому» состоянию

0 голосов
/ 30 марта 2011

Я нашел простую структуру аккордеона 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/

Буду очень признателен за любую помощь! :)

Ответы [ 2 ]

0 голосов
/ 19 января 2016

Для элемента меню будет применяться стиль ui-state-active, когда он открыт.Используйте это.

0 голосов
/ 30 марта 2011

Вот ваш ответ:

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
...