这是我的脚本（我发现）：

$(document).ready(function () {
    var expanded = false;
    var collapsed = true;
    $(".expanderHead").click(function () {
        if (expanded == true) {
            expanded = false;
            collapsed = true;
        } else {
            expanded = true;
            collapsed = false;
        }

        if (expanded == true) {
            $(".expanderSign").html("-");
            $(".expanderContent").slideToggle();
        }

        if (collapsed == true) {
            $(".expanderSign").html("+");
            $(".expanderContent").slideToggle();
        }
    });
});

这是我尝试过的：

http://jsfiddle.net/YqEVZ/2/

$(document).ready(function () {
    var expanded = false;
    var collapsed = true;
    $(".infoexpanderHead1").click(function () {
        if (expanded == true) {
            expanded = false;
            collapsed = true;
        } else {
            expanded = true;
            collapsed = false;
        }

        if (expanded == true) {
            $(".infoexpanderSign1").html("-");
            $(".infoexpanderContent1").slideToggle();
            $(".infoexpanderContent2").slideToggle();
        }

        if (collapsed == true) {
            $(".infoexpanderSign1").html("+");
            $(".infoexpanderContent1").slideToggle();
            $(".infoexpanderContent1").slideToggle();
        }
    });

    $(document).ready(function () {
        var expanded = true;
        var collapsed = true;
        $(".infoexpanderHead2").click(function () {
            if (expanded == true) {
                expanded = false;
                collapsed = true;
            } else {
                expanded = true;
                collapsed = false;
            }

            if (expanded == true) {
                $(".infoexpanderSign2").html("-");
                $(".infoexpanderContent2").slideToggle();

            }

            if (collapsed == true) {
                $(".infoexpanderSign2").html("+");
                $(".infoexpanderContent2").slideToggle();
            }
        });
    });

每个infoexpandercontent应该有不同的内容。 如果'内容1'已展开，请忽略'内容2'，但是我对jQuery和Javascript非常陌生，我主要完成了HTML / CSS

此外，是否可以在“扩展”范围内添加CSS类？我的意思是在跨度上会出现border-bottom，其内容会被扩展。

我希望它有一个平滑过渡，而不仅仅是大致改变内容。

问我是不是太清楚了！

谢谢你，任何帮助表示赞赏！

Answer 1

如果您可以默认显示其中一个，则可以将所有内容略读到这些行：

$(document).ready(function () {
    $(".infoexpanderHead1, .infoexpanderHead2").click(function () {
        $(".infoexpanderContent1,.infoexpanderContent2").slideToggle();
        $(".infoexpanderSign1, .infoexpanerSign2").each(function() {
            $(this).html($(this).html() == '-' ? '+' : '-');
        });
    });
});

jsfiddle

现在，我看到你的代码中有点错误是你使用了2个“分组”元素集之间不常见的类。如果您像这样更新布局，则可以使这更加动态：

<div class="infoExpander expanded">
    <div class="head"><span class="sign">-</span>Lorem ipsum</div>
    <div class="content">Lorem ipsum<br />Lorem ipsum</div>
</div>
<div class="infoExpander">
    <div class="head"><span class="sign">+</span>Lorem ipsum</div>
    <div class="content">Lorem ipsum<br />Lorem ipsum</div>
</div>

你的JS就是这样：

$(document).ready(function () {
$(".infoExpander .head").click(function () {
    $('.content').not($(this).nextAll('.content')).slideUp().prevAll('.head').find('.sign').html('+');
    $(this).nextAll('.content').slideDown(function() {
      $(this).closest('.infoExpander').addClass('expanded').find('.sign').html('-');
    });
});
});

这是一个jsfiddle，可以看到它的实际效果。

Answer 2

确保您的内容在父级内部。我创建了一个小演示：http://jsfiddle.net/F8Ean/

删除classname中的“1”或“2”，因为classname应该相同。尝试将id用于共享名称的唯一名称和类。选择所有.infoexpanderHead元素，并绑定click事件以切换.infoexpanderContent内部的可见性。

兄弟姐妹（）指的是同一级别上点击元素的所有相同类别（.infoexpanderHead）

$('.infoexpanderHead').click(function(){
    $(this).siblings().find('.infoexpanderContent').slideUp();
    $(this).find('.infoexpanderContent').slideDown();
});

如果像这样使用，你可以添加任意数量的块，这段代码将处理所有元素。

jQuery - 打开div，关闭另一个

这是我的脚本（我发现）：

这是我尝试过的：

2 个答案: