如何縮短多種手風琴樣式的JQuery腳本？

Question

我正在嘗試創建具有4種手風琴樣式的WordPress主題。 我嘗試玩弄我的代碼以使其更短，但是我沒有做任何技巧。 有什么辦法可以縮短時間？ 您的幫助將不勝感激！

jQuery(document).ready(function() {
    var allPanels = jQuery('.accordion-style1 > dd').hide();
    jQuery('.accordion-style1 > dt > a').click(function() {
        allPanels.slideUp();
        if(jQuery(this).parent().next().is(':hidden')) {
            jQuery(this).parent().next().slideDown();
        }
        return false;
    });
});

jQuery(document).ready(function() {
    var allPanels = jQuery('.accordion-style2 > dd').hide();
    jQuery('.accordion-style2 > dt > a').click(function() {
        allPanels.slideUp();
        if(jQuery(this).parent().next().is(':hidden')) {
            jQuery(this).parent().next().slideDown();
        }
        return false;
    });
});

jQuery(document).ready(function() {
    var allPanels = jQuery('.accordion-style3 > dd').hide();
    jQuery('.accordion-style3 > dt > a').click(function() {
        allPanels.slideUp();
        if(jQuery(this).parent().next().is(':hidden')) {
            jQuery(this).parent().next().slideDown();
        }
        return false;
    });
});

jQuery(document).ready(function() {
    var allPanels = jQuery('.accordion-style4 > dd').hide();
    jQuery('.accordion-style4 > dt > a').click(function() {
        allPanels.slideUp();
        if(jQuery(this).parent().next().is(':hidden')) {
            jQuery(this).parent().next().slideDown();
        }
        return false;
    });
});

http://jsfiddle.net/michellecantin/4mYdn/

Answer 1

應該這樣做：

jQuery(document).ready(function () {
    jQuery('dl[class^=accordion-style] > dd').hide();
    jQuery('dl[class^=accordion-style] > dt > a').click(function () {
        jQuery(this).parent().parent().children("dd").slideUp();

        jQuery(this).parent().next("dd:hidden").slideDown();

        return false;
    });
});

參考： http ： //api.jquery.com/attribute-starts-with-selector/

演示： http : //jsfiddle.net/4mYdn/7/

Answer 2

刪除每堂課之后的數字，例如<dl class="accordion-style">

var allPanels = jQuery('.accordion-style > dd').hide();
jQuery('.accordion-style > dt > a').on('click', function () {
    jQuery(this).parents('.accordion-style').find('dd').slideUp();

    if (jQuery(this).parent().next().is(':hidden')) 
       {
        jQuery(this).parent().next().slideDown();
       }
    return false;
});

jsfiddle http://jsfiddle.net/code_snips/4mYdn/2/

如果您不想更改班級名稱，可以做兩件事

1. <dl class="accordion-style accordion-style1 "> //在類名之前添加手風琴樣式

2. 修改代碼

    var allPanels = jQuery('dl[class^=accordion-style] > dd').hide(); jQuery('dl[class^=accordion-style] > dt > a').on('click', function () { jQuery(this).parents('dl[class^=accordion-style]').find('dd').slideUp(); if (jQuery(this).parent().next().is(':hidden')) { jQuery(this).parent().next().slideDown(); } return false; }); 

Jsfiddle http://jsfiddle.net/code_snips/4mYdn/9/

屬性以選擇器^開頭

Answer 3

除了一個小的區別，所有功能都一​​樣嗎？ 那就是功能參數的作用:)

function accordion(i) {
    var allPanels = jQuery('.accordion-style'+i+' > dd').hide();
    jQuery('.accordion-style'+i+' > dt > a').click(function() {
        allPanels.slideUp();
        if(jQuery(this).parent().next().is(':hidden')) {
            jQuery(this).parent().next().slideDown();
        }
        return false;
    });
}

jQuery(document).ready(function(){
 for(var i=1;i<=4;i++)accordion(i);
});