Состояния меню JQuery - PullRequest
Новая
       17

Состояния меню JQuery

2 голосов
/ 30 июля 2009

У меня есть аккордеонное меню с изображением заголовка, которое изменяется в зависимости от состояния (открыто / закрыто), проблема в том, что как только какая-то часть меню открыта, изображения в открытом состоянии остаются, даже если раздел меню закрыт. Я бы хотел, чтобы закрытое состояние вернулось после закрытия этой части меню.

код 

     $(document).ready(function() {
        //slides the element with class "menu_body" when paragraph with class 
        //"sidemenu_head" is clicked 
        $("#firstpane p.sidemenu_head").click(function() {
            $(this).css({backgroundImage:"url(g/down.png)"})
                   .next("div.sidemenu_body")
                   .slideToggle(300)
                   .siblings("div.sidemenu_body")
                   .slideUp("fast");

            $(this).siblings()
                   .css({backgroundImage:"url(left.png)"}); 
    });

Ответы [ 4 ]

1 голос
/ 30 июля 2009

Что-то вроде этого должно сделать 

$("#firstpane p.sidemenu_head").click(function()
{
     if ($(this).css("backgroundImage") == "url(g/down.png)") {
          $(this).css({backgroundImage:"url(g/left.png)"})
     }
     else {
          $(this).css({backgroundImage:"url(g/down.png)"})
     } 
     $(this).next("div.sidemenu_body").slideToggle(300)
          .siblings("div.sidemenu_body").slideUp("fast");
     $(this).siblings().css({backgroundImage:"url(left.png)"}); });
});

* Исправлено отсутствие), это должно работать.

1 голос
/ 30 июля 2009

Я рекомендую использовать событие change аккордеона. Вашему обработчику будут переданы ссылки как на заголовок, так и на элементы содержимого как закрывающего, так и открывающего элемента аккордеона. 

$('#my-accordion').bind('accordionchange', function(event, ui) {
    ui.oldHeader.css( /* swap bg img */ );
    ui.newHeader.css( /* swap bg img */ );
});
0 голосов
/ 30 июля 2009

Это на самом деле не работает. Он просто создает еще один щелчок, который изменит морковь, но теперь вам нужно дважды щелкнуть, чтобы раскрыть содержимое (один раз, чтобы изменить морковь и снова открыть).

0 голосов
/ 30 июля 2009

Переключение Jquery может работать для вас. Я удалил элемент show / hide div для простоты, но вы можете легко добавить его обратно: 

$(document).ready(function()
{
    $('#firstpane p.sidemenu_head').toggle(
        function()
        {
            $(this).css({ backgroundImage: "url(g/down.png)" });

        }, function()
        {
            $(this).css({ backgroundImage: "url(g/left.png)" });

        });
});
...