用初始状态折叠面板

Question

我正在尝试使崩溃的面板以折叠的初始状态（或不使用）工作。没有初始状态功能，它可以正常工作，但是当我引入时，初始点击是愚蠢的，并且指示图标会倒置。我敢肯定，这只是一个逻辑难题，我无法清楚地看到，但事实是我很困惑。

使用jQuery和bootstrap。为了本文的目的，该代码对代码进行了稍作修改，这就是为什么它具有其自身函数（通常是带有打字稿的导出函数，但在这里不重要），并且图标使用了图标字体，因此我替换了'^'^为简单起见。

要清楚，当面板倒塌时，"图标"应指出，并在扩展时向上指示，表明当您单击它时会发生什么措施（而不是指示其当前状态（这引起了我的工程师之间的混淆和设计师，大声笑！）我需要能够将"倒塌"类应用于目标，以使其初始状态崩溃。

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

因为最初您将逻辑弄乱，然后用代码弄清相同的内容，因此您的第一次点击实际上是设置正确的类（添加或删除），然后随后的单击即可。

我希望这会有所帮助

Answer 2

解决方案：

感谢大家的投入。它帮助我弄清楚了如何解决这个问题。因此，图标的东西引起了一些混乱。我正在使用字形雪佛龙。因此，我所做的是创建几个CSS课程：

.collapse-icon-up:after {
    content: "E602";
}
.collapse-icon-down:after {
    content: "E601";
}

根据初始状态使用不同的字形。这与我的JS和CSS动画切换效果很好。我评论说：

tar.toggleClass("collapsed");

正如穆罕默德·埃尔萨德（Mohammed Elsayed）所建议的。谢谢：）

然后我添加：

if (tar.hasClass("collapsed")) {
    $this.addClass("collapse-icon-down");
} else {
    $this.addClass("collapse-icon-up");
}

到每个循环的JS以设置图标的初始方向。

正如我所怀疑的那样，这很简单，只是一个逻辑难题。现在似乎工作得很完美！再次感谢你的帮助！：D