Question

Accordion的原始版本支持水平可折叠内容面板：https://www.w3schools.com/howto/howto_js_accordion.asp。

我为垂直可折叠内容面板创建了一个jsfiddle：

这是我能够做到的。

html, body {
  background-color:#e9eaed;
}
.content {
  width:960px;
  height:0px;
  margin-right: auto;
  margin-left: auto;
}
.panel-group {
  width:430px;
  z-index: 100;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
}
.panel-heading {
  width: 430px;
}
.panel-title {
  height:18px
}
.panel-title a {
  float:right;
  text-decoration:none;
  padding: 10px 430px;
  margin: -10px -430px;
}
.panel-body {
  height:830px;
}
.panel-group img {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateX(0%) rotate(90deg);
  -webkit-transform-origin: left top;
  -moz-transform: translateX(0%) rotate(90deg);
  -moz-transform-origin: left top;
  -o-transform: translateX(0%) rotate(90deg);
  -o-transform-origin: left top;
  transform: translateX(0%) rotate(90deg);
  transform-origin: left top;
}
.panel-group p {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateX(0%) rotate(90deg);
  -webkit-transform-origin: left top;
  -moz-transform: translateX(0%) rotate(90deg);
  -moz-transform-origin: left top;
  -o-transform: translateX(0%) rotate(90deg);
  -o-transform-origin: left top;
  transform: translateX(0%) rotate(90deg);
  transform-origin: left top;
}
.panel-group .panel img {
  margin-left:400px;
  position: absolute;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="content">
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Accordion 1
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
              <p>
                <h1>Title1</h1>
                <br>11A paragraph of text about something pertinant to the site which people could read should the feel the need to read about it. They could skip it as well but this keeps the initial view a good deal less text heavy, see?
                <br>- Some Source
              </p>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Accordion 2
              </a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
              <p>
                <h1>Title2</h1>
                <br>
                  22A paragraph of text about something pertinant to the site which people could read should the feel the need to read about it. They could skip it as well but this keeps the initial view a good deal less text heavy, see?
                <br>- Some Source
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

但我不知道如何实现以下行为：加载页面时应打开内容面板Accordion1。它应占据所有屏幕。但是，当用户点击Accordion2时，每个内容面板占据50％。我该怎么做？我在想，也许这种行为Accordion1实际上可以用固定的div代替。

Answer 1

尝试为您的手风琴添加一些脚本：

$(document).on('ready', function() {
    $('#collapseOne').collapse('toggle');
    $('#accordion .panel-heading').on('click', function(e) {
        $('body').addClass('accordion-clicked');
    });
});

比支持它的一些样式：

#accordion .panel .panel-body {
    height: 40vw;
    width: 100vh;
}
#accordion .panel:nth-child(1) .panel-body {
    height: 80vw;
}
.accordion-clicked #accordion .panel:nth-child(1) .panel-body {
    height: 40vw;
}

您可以调整值。致力于JSFiddle。

如何修改我的垂直可折叠内容面板？

1 个答案: