Question

现在我正在尝试使用切换功能构建列表组，如下所示：

基本上我期待的是，当我点击其中一个列表项上的蓝色箭头时，相应的项目将被切换，细节将被展开，当我再次单击蓝色箭头时，细节将崩溃。

在详细信息中，我希望有多个块，如下所示：

然而，我现在的代码就像：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Details</title>
  <style type="text/css">
    * {
      font-family: Arial, Verdana, sans-serif;
      color: #665544;
      text-align: center;
    }
    body {
      width: 100%;
      margin: 0 auto;
    }
    #trailBar {
      margin-left: 35px;
      margin-right: 35px;
      margin-top: 25px;
      margin-bottom: 25px;
      height: 180px;
      background: -webkit-linear-gradient(right, #31a7de, #31a7de 35px, white 35px, white);
      border: transparent;
      border-radius: 0.25em;
    }
    p.trailTextTop {
      padding-top: 25px;
      padding-left: 25px;
      padding-right: 60px;
      padding-bottom: 25px;
      font-size: large;
    }
    p.trailTextBot {
      padding-left: 25px;
      padding-right: 60px;
      padding-bottom: 25px;
      font-size: large;
    }
    .left {
      float: left;
    }
    .right {
      float: right;
    }
    p {
      overflow: hidden;
    }
    .panel-group .list-group {
      margin-bottom: 0;
    }
    .panel-group .list-group .list-group-item {
      border-radius: 0;
      border-left: none;
      border-right: none;
    }
    .panel-group .list-group .list-group-item:last-child {
      border-bottom: none;
    }
    .panel-body {
      background: #efefef;
    }
  </style>
</head>

<body>



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <h1>Collapse (as seen in documenatation)</h1>
  <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">Collapsible Group Item #1</a>
			</h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <div id="trailBar">
            <p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span>
            </p>

            <p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span>
            </p>

          </div>

          <div id="trailBar">
            <p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span>
            </p>

            <p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span>
            </p>

          </div>

          <div id="trailBar">
            <p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span>
            </p>

            <p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span>
            </p>

          </div>
        </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">Collapsible Group Item #2</a>
			</h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a>
			</h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>




</body>

</html>

＆＃13;

在我的代码中，我以非常愚蠢的方式生成块，这是一次又一次地复制和粘贴。

我的问题是，是否有办法在html / css级别定义以下块的类，以便我可以随时随地调用它，就像java类一样？

提前致谢!!

Answer 1

我有手风琴的自定义脚本：

＆＃13;

$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
  if ($(this).hasClass("opened") == true) {
    $(this).next().slideUp("slow");
    $(this).removeClass('opened');
  } else {
    $(".opened").next().slideUp("slow");
    $(".opened").removeClass("opened");
    $(this).addClass('opened');
    $(this).next().slideDown("slow");
  }
});

＆＃13;

.accordionOm {
  position: relative;
  padding: 10px 0 10px 30px;
  margin: 0;
  font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.accordionOm:hover {
  color: #000;
}
.accordionOm:before,
.accordionOm:after {
  content: "";
  position: absolute;
  background: #333;
  display: inline-block;
}
.accordionOm:before {
  width: 20px;
  height: 2px;
  left: 0;
  top: 22px;
}
.accordionOm:after {
  width: 2px;
  height: 20px;
  left: 9px;
  top: 13px;
  transition: transform .5s;
  transform: rotate(0);
}
.accordionOm.opened:after {
  transform: rotate(90deg);
}
.accordionOm + div {
  border-left: 4px solid #999;
  padding: 0 15px;
  margin-left: 8px;
  font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
  color: #666;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

＆＃13;

如果您想要箭头，可以使用css自定义它。

HTML＆amp; CSS是否有更好的方法来执行此操作而不是复制？

1 个答案: