Измените изображение bg при переключении меню аккордеона - PullRequest
Новая
       29

Измените изображение bg при переключении меню аккордеона

0 голосов
/ 07 мая 2009

У меня есть ccordion menu, и у каждого заголовка меню есть маленькая стрелка img, которая меняется, когда меню скользит вниз и вверх.

Это код на данный момент: 

    $(document).ready(function() {
    $("div.menu_body").hide();
    $("#menuheader div.menu_head div.detailsPanel").toggle(function() {
      $(this).addClass("detailsPanelSelected").parent(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    },
      function() {

 $(this).removeClass("detailsPanelSelected").parent(this).next("div.menu_body").slideUp("slow");
      }
    );

Это прекрасно работает, когда я переключаю один элемент меню за раз.

Но скажем, я раскрываю один пункт меню и нажимаю на другой заголовок меню. Что происходит, так это то, что первый элемент меню перемещается вверх, а вновь щелкающий - вниз, как и ожидалось. Но стрелка GIF не меняется обратно в меню, которое скользит вверх. Это происходит потому, что функция переключения все еще находится в первом состоянии, и если я щелкну по нему еще раз, удалив класс «detailsPanelSelected», все, что произойдет, это то, что изображение вернется обратно. Глядя на код, это ожидаемо.

Итак, мой вопрос: как мне сделать так, чтобы пункты меню "detailsPanelSelected" удалялись при нажатии на другой заголовок меню? Можно ли как-то сбросить функцию ожидающего переключения?

Ответы [ 2 ]

0 голосов
/ 26 октября 2011

звучит так, как вы могли бы сделать с помощью Slidorion. Это комбинация слайдера изображения и аккордеона. проверить это, может быть полезно:

http://www.slidorion.com

0 голосов
/ 08 мая 2009

попробуйте что-то вроде этого:

$ ("# menuheader div.menu_head div.detailsPanel"). Toggle (function () {

$ ( "detailsPanelSelected"). Каждая (функция (я) { this.removeClass ( "detailPanelSelected"); }) 

$(this).addClass("detailsPanelSelected").parent(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

}

важная часть кода такова:

$ ( "detailsPanelSelected"). Каждая (функция (я) { this.removeClass ( "detailPanelSelected"); })

он должен быть расположен над кодом, в котором вы добавляете класс, который меняет направление стрелки ... поэтому все элементы возвращаются в свое закрытое состояние, тогда ваша следующая функция "открывает" правильный

...