Как сделать так, чтобы мой аккордеон не трещал при первом нажатии?

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

Кроме того, мой подход не очень эффективен для повторного использования. Если вы посмотрите на событие щелчка, я создаю его для каждого элемента аккордеона. Как мне установить его так, чтобы аккордеон работал для каждого элемента, будь то «item1», «item2», «item3» и т. д., без необходимости создавать новое событие клика для каждого?

У меня есть jsfiddle, размещенный здесь: http://jsfiddle.net/Jfd9n/1/

Спасибо за помощь!

// Accordion Plugin
(function($){
    $.fn.scaccordion = function(options){

        var defaults = {
            // Variables Here
        };

        var options = $.extend(defaults, options);

        $('div.accordionitem').addClass('active');
        $('div.accordionitem').slideDown();
        console.log('Add class: active to all div.accordionitem elements.')

        // Click Event for item1: Open
        $(this).find('div.accordionitem.item1').on('click', function (e) {
            e.preventDefault();

            console.log('Accordion Item 1 Clicked');

            if ($('div.accordionitem.item1').hasClass('active')) {
                $('div.accordionitem.item1 div.accordion_content').slideUp();
                $('div.accordionitem.item1').removeClass('active');
            } else {
                $('div.accordionitem.item1 div.accordion_content').slideDown();
                $('div.accordionitem.item1').addClass('active');
            }
        });

        // Click Event for item2: Open
        $(this).children('div.accordionitem.item2').on('click', function (e) {
            e.preventDefault();

            console.log('Accordion Item 2 Clicked');

            if ($('div.accordionitem.item2').hasClass('active')) {
                $('div.accordionitem.item2 div.accordion_content').slideUp();
                $('div.accordionitem.item2').removeClass('active');
            } else {
                $('div.accordionitem.item2 div.accordion_content').slideDown();
                $('div.accordionitem.item2').addClass('active');
            }
        });

        // Click Event for item1: Open
        $(this).children('div.accordionitem.item3').on('click', function (e) {
            e.preventDefault();

            console.log('Accordion Item 3 Clicked');

            if ($('div.accordionitem.item3').hasClass('active')) {
                $('div.accordionitem.item3 div.accordion_content').slideUp();
                $('div.accordionitem.item3').removeClass('active');
            } else {
                $('div.accordionitem.item3 div.accordion_content').slideDown();
                $('div.accordionitem.item3').addClass('active');
            }
        });
    };
})(jQuery);

$('div.taccholder').scaccordion();

jquery accordion jquery-ui-accordion jquery-click-event
person Pegues    schedule 08.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Как насчет этого, см. обновление jsfiddle.

Ваш код:

// Accordion Plugin
(function($){
    $.fn.scaccordion = function(options){

        var defaults = {
            // Variables Here
        };

        var options = $.extend(defaults, options);

        $('div.accordionitem').addClass('active');
        console.log('Add class: active to all div.accordionitem elements.')

        // Click Event for item1: Open
        $(this).find('div.accordionitem').on('click', function (e) {
            e.preventDefault();
            var self = $(this);
            if ($(this).hasClass('active')) {

                $(this).find('.accordion_content').slideUp(300, function () {
                    self.removeClass('active');
                });
            } else {

                $(this).find('.accordion_content').slideDown(300, function () {
                self.addClass('active');    
                });
            }
        });
    };
})(jQuery);

$('div.taccholder').scaccordion();
person Rahil Wazir    schedule 08.12.2013
comment
Это определенно сработало! Это так много. Работает как шарм. - person Pegues; 09.12.2013
comment
@ScriptsConnect, если ответ помог вам, выберите его как лучший ответ! - person Rahil Wazir; 09.12.2013
comment
Сделанный. Извините, я забыл об этом. Я попал только на дно. Галочка теперь зеленая! - person Pegues; 09.12.2013