Как закрыть эффект jQuery Accordion при втором нажатии? - PullRequest
Новая
       22

Как закрыть эффект jQuery Accordion при втором нажатии?

2 голосов
/ 08 января 2012

Я недавно купил «Smashing jQuery» Джейка Раттера - это хорошая книга, но я застрял, немного изменив код «Аккордеона».

При щелчке по разделу он расширяется, как и предполагалось, но если щелкнуть второй раз (пока он еще открыт), он закрывается только для мгновенного открытия снова.

Я хочу, чтобы расширенный раздел закрывался при повторном нажатии, и только при повторном нажатии. Надеюсь, это имеет смысл. Любая помощь будет высоко ценится.

Пожалуйста, посмотрите демонстрационный URL ниже для примера и кода, который я использовал. http://demos.d3 -creative.com / баян / аккордеон 1.html

Ответы [ 3 ]

0 голосов
/ 09 января 2012

Вам нужно что-то вроде ниже, чтобы это работало.Смотрите комментарии: 

var $header = $('.accordion-header'),//always cache your selectors
    $content = $('.accordion-content');

$header.click(function () {

    var $this = $(this),
        $relatedContent = $this.next();

    if($relatedContent.is(':visible')) { // If the tab is already open

        $relatedContent.slideUp('fast');

        $this.find('.icon-active').removeClass('icon-active');

        $this.removeClass('header-active');

    } else { // if the tab is closed

        // Close any other opened tabs
        $content.slideUp('fast');
        $header.removeClass('header-active');
        $header.find('span').removeClass('icon-active');

       // Open related tab
        $relatedContent.slideDown('fast');

        $this.find('span').addClass('icon-active');

        $this.addClass('header-active');
    }

});

И добавьте display:none к #accordion .accordion-content

0 голосов
/ 09 января 2012

Вам необходимо изменить это в части JS: 

$('.accordion-header').click(function () {
    $('.accordion-header').next().slideUp('fast'); // Close all boxes - Hide all contents
    $('.accordion-header').removeClass('header-active'); // Remove active class from all headers
    $(this).addClass('header-active'); // Adds active class to currently clicked element
    $(this).next().slideDown('fast'); // Shows content

    $('.icon-active:visible').removeClass('icon-active');
    $(this).find('span').addClass('icon-active');

});

Я изменил поведение так, чтобы при каждом щелчке по заголовку он сначала закрывал все поля содержимого, затем удалял активный класс на всех заголовках, затем открывал окно сразу после элемента, по которому щелкнули, и также изменял его класс. Код прокомментирован, как вы можете видеть!

Пример здесь: http://jsfiddle.net/snzSy/

Кроме того, я не изменял последние 2 строки, касающиеся значков!

Примечание: Мы оба здесь новички, поэтому я могу свободно сказать вам, что людям легче помочь вам, если вы потратите некоторое время на подготовку вопроса. Скрипка JS хороша, потому что тогда мы можем напрямую протестировать и изменить ваш код ....

0 голосов
/ 08 января 2012

имеет чтение:

http://api.jquery.com/slideUp/

вам необходимо добавить некоторую логику if / else в функцию щелчка, в противном случае каждый раз, когда вы нажимаете на раздел, он будет выполнять всекод в функции.

...