Question

我的手风琴有问题。我第一次点击任何标题栏来折叠该项目时，它有一个尖锐的弹出来关闭它。我正在使用slideUp（），但它似乎最初没有使用。如果我一直单击该项目的标题栏，则slideUp（）/ slideDown（）开始工作。

此外，我的方法对可重用性不是很有效。如果你看一下click事件，我会为每个手风琴项目创建它。如何设置它以便它是“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();

Answer 1

如何查看更新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();

如何在第一次点击时弹出手风琴？

1 个答案: