Question

我有一个约有15个部分的常见问题解答页面。每个问题都使用slideToggle来扩展每个答案。那一切都很好。问题是每个部分都需要“展开/全部折叠”，这将仅在该特定部分内扩展所有问题。我正在使用的脚本是完美的，只是我必须为每个部分创建一个相同脚本的块。例如：

$('#faq-content a.all').click(function() {
    if ($(this).hasClass('collapse')) {
        $('#faq-content dt.opened').click();
    } else $('#faq-content dt:not(.opened)').click();
    $(this).toggleClass('expand collapse');
    return false;
});

$('#faq-hardware a.all').click(function() {
    if ($(this).hasClass('collapse')) {
        $('#faq-hardware dt.opened').click();
    } else $('#faq-hardware dt:not(.opened)').click();
    $(this).toggleClass('expand collapse');
    return false;
});

我想知道是否可以采用统一的方式来控制所有部分。

Answer 1

您可以尝试使用通配符asterik *

$('#faq*).click(function() { ..

请参阅：Find all elements on a page whose element ID contains a certain text using jQuery

此外，您可以为要切换的每个元素指定一个类，然后使用类选择器进行展开/折叠。

Answer 2

在不知道dom的结构的情况下，您应该只使用某些类来执行此操作并删除Id

的依赖项

$('.faq a.all').click(function() {
    var $faq = $(this).parent(); //Where a is a child of .faq
    if ($(this).hasClass('collapse')) {
        $faq.find('dt.opened').click();
    } else{
      $faq.find('dt:not(.opened)').click();
    }
    $(this).toggleClass('expand collapse');
    return false;
});

Answer 3

我会做类似

的事情

$("[id^=faq-]").click(function() { ..

这将允许您选择以“faq - ”开头的任何ID。

祝你好运！

结合jQuery扩展所有切换功能

3 个答案: