JQuery аккордеон: возвращение к предыдущему стилю для «закрытого» состояния - PullRequest
Новая
       83

JQuery аккордеон: возвращение к предыдущему стилю для «закрытого» состояния

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

Я использую простой аккордеон 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);
            }
        });
    });
});

CSS: 

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

HTML: 

<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 Ответ

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

Попробуйте использовать .toggleClass()

    $(".menu_active").not(this).removeClass('menu_active');
    $(this).toggleClass('menu_active');

Обновлено jsfiddle .

...