javascript - 折叠具有初始状态的面板

Question

我试图让我的折叠面板在折叠(或不折叠)的初始状态下工作。没有初始状态功能，它工作正常，但当我介绍它时，初始点击是愚蠢的，并且指示器图标是倒置的。我敢肯定这只是一个我没有看清楚的逻辑难题，但事实是我被难住了。

使用 jQuery 和 Bootstrap。出于这篇文章的目的，代码略有修改，这就是为什么它有自己的功能(通常它是 TypeScript 的导出功能，但在这里不重要)并且图标使用图标字体所以我替换了一个'^ ' 为简单起见。

明确地说，“图标”应该在面板折叠时指向下方，在展开时指向上方，指示单击它时会发生什么操作(而不是指示其当前状态(这在我的工程师之间引起了一些混淆)和设计师，哈哈!)我需要能够将“折叠”类应用于目标，以便它的初始状态是折叠的。

http://codepen.io/sinrise/pen/eBoNPE

HTML

<div class="container" style="padding-top: 30px;">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading collapse-header" data-target="#test-panel1">Heading</div>
        <div class="panel-body collapsed" id="test-panel1">
          <p>some content</p>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading collapse-header" data-target="#test-panel2">Heading</div>
        <div class="panel-body" id="test-panel2">
          <p>some content</p>
        </div>
      </div>
    </div>  
  </div>
</div>

CSS

.collapse-header + .collapsed { display: none; }

.collapse-header {
    position: relative;
    &:hover { cursor: pointer; }
    &:after {
        position: absolute;
        font-family: "Sans-serif";
        content: "^";
        transform: rotateZ(0deg);
        right: 15px;
        transition: all 0.5s linear;
    }
    &.rotate-icon {
        &:after {
            transform: rotateZ(180deg);
            transition: all 0.5s linear;
        }
    }
}

JS/jQuery

function setCollapsableHeaders() {
    $.each($(".collapse-header"), function () {
        var $this = $(this);
        var tar = $($this.attr("data-target"));
        $this.on("click", function () {
            $this.toggleClass("rotate-icon");
            tar.toggleClass("collapsed");
            tar.animate({
                height: "toggle",
                paddingTop: "toggle",
                paddingBottom: "toggle"
            }, 500, function () {
            });
        });
    });
};

$(function(){
  setCollapsableHeaders();
});

Answer 1

如您所料，这只是对代码的一个小改动。 :)

这是一个工作的(除了图标，你应该放置任何你想要的图标) http://codepen.io/anon/pen/ZBZbEa

这里是整个片段供引用

function setCollapsableHeaders() {
$.each($(".collapse-header"), function () {
    var $this = $(this);
    var tar = $($this.attr("data-target"));
    $this.on("click", function () {
        $this.toggleClass("rotate-icon");
        //tar.toggleClass("collapsed");
        tar.animate({
            height: "toggle",
            paddingTop: "toggle",
            paddingBottom: "toggle"
        }, 500, function () {
        });
    });
});
};

$(function(){
      setCollapsableHeaders();
});

唯一改变的是这条注释行

//tar.toggleClass("collapsed");

因为一开始你搞乱了逻辑，然后用代码做了同样的事情，所以你的第一次点击实际上是设置了正确的类(添加或删除)，然后后续点击就没问题了。

希望对你有帮助