Question

我试图使我的折叠面板处于初始折叠状态（或不折叠状态）。没有初始状态功能，它工作正常，但是当我介绍它时，初始点击是愚蠢的，并且指针图标被反转。我确定这只是一个逻辑难题，我没有看清楚，但事实是我很难过。

使用jQuery和Bootstrap。为了这篇文章的目的，稍微修改了代码，这就是为什么它在自己的函数中（通常它是一个带TypeScript的导出函数但在这里不重要）并且图标是使用图标字体，所以我替换了＆＃39; ^＆＃39;为简单起见。

要清楚，＆＃39;图标＆＃39;当面板折叠时应该向下指向，当展开时向上指向，指示当你点击它时会发生什么动作（而不是指示它的当前状态（这导致我的工程师和设计师之间的混淆，哈哈！）我需要能够将一类“折叠”应用于目标，以使其初始状态崩溃。

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

<强>解决方案：

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

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

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

根据初始状态使用不同的glyphicon。这适用于我的js和CSS动画切换。我评论说：

tar.toggleClass("collapsed");

按照穆罕默德·埃尔塞耶德的建议。谢谢:)）

然后我补充道：

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

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

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

折叠具有初始状态的面板

2 个答案: