如何縮短我的多個手風琴風格的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

是否所有的功能，除了一個小的差別一樣嗎？這將是函數參數的作用:)

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); 
}); 

Answer 3

取出數每類如<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/

Attribute start with selector ^