正确使用Javascript函数的方法

时间:2014-07-16 08:46:07

标签: javascript jquery jquery-animate dry

这是一个由jQuery的animate()方法制作的简单手风琴。

var accordionTrigger1 = $('h4.panel-title.category_men'),
    accordionTarget1 = $(accordionTrigger1).parent().next('.panel-body');

$(accordionTarget1).hide();

$(accordionTrigger1).on('click', function() {
    $(accordionTarget1)
    .stop()
    .animate(
    {
        height: 'toggle'
    }, 
    {
        duration: 300,
        easing: 'easeOutCirc'
    }
    );
});

假设我必须创建更多的手风琴,我现在正在为触发器及其目标创建新变量,为此我一次又一次地重复点击功能。有没有办法可以使用以下函数而不必一遍又一遍地写animate()方法(即不重复函数并通过参数或其他东西调用它)?

2 个答案:

答案 0 :(得分:1)

我想你问这样的事情:

var accordionTrigger1 = $('h4.panel-title.category_men'),
    accordionTarget1 = $(accordionTrigger1).parent().next('.panel-body');


accordion(accordionTrigger1, accordionTarget1);



function accordion(trigger, target){
    target.hide();

    trigger.on('click', function() {
        target
            .stop()
            .animate(
                {
                    height: 'toggle'
                },
                {
                    duration: 300,
                    easing: 'easeOutCirc'
                }
            );
    });
}

答案 1 :(得分:1)

在您的第一行more selectors以逗号分隔。

var accordionTrigger1 = $('h4.panel-title.category_men, more selectors, more selectors, ...'),

不是短语more selectors。实际选择器。 :)