1

我正在尝试创建一个具有 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/

4

3 回答 3

2

这应该这样做：

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/

于 2013-11-03T18:01:06.890 回答
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/

属性以选择器开头 ^

于 2013-11-03T18:01:27.993 回答
1

除了一点点不同之外，所有功能都相同吗？那将是函数参数的作用:)

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);
});
于 2013-11-03T17:59:12.800 回答