javascript - 为什么 Accordion 类会触发其他名称不同的面板-6ren

javascript - 为什么 Accordion 类会触发其他名称不同的面板

转载作者：行者123 更新时间：2023-11-28 01:10:15

为什么我的一些 Accordion 在命名不同时会触发其他 Accordion 。

我一直在尝试解决这个问题，当我在第二个、第三个或第四个面板中打开第二个 Accordion 并且第一个面板的第二个 Accordion 打开时，他们将其关闭。同样的问题多次发生，其他面板从它们应该是的地方触发不同的面板。

    @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
    body {
      background: #111d27;
      color: #111;
      /*min-width: 320px;*/
      min-width: 1024px;
      font-size: 16px;
      font-weight: 300;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -webkit-backface-visibility: hidden;
      position: relative;
      padding: 50px 20px;
    }
    .main {
      text-align: center;
      color: #777;
      font-size: 14px;
      padding-left: 0;
      margin-bottom: 30px;
      background-color: #F5F5F5;
      font-family: 'Lato';
    }
    .main img {
      display: block;
      margin: auto;
      width: 32px;
    }
    .main li:first-child,
    .main li:last-child {
      padding: 5px 5px 0px 0px;
    }
    .main li {
      list-style: none;
      padding: 13px;
    }
    .main li + li {
      border-top: 1px solid #f0f0f0;
    }
    .main big {
      font-size: 32px;
    }
    .main h3 {
      margin-bottom: 0;
      font-size: 36px;
    }
    .main h4 {
      margin-bottom: 0;
      font-size: 15px;
    }
    .main span {
      font-size: 12px;
      color: #999;
      font-weight: normal;
    }
    .main li:nth-last-child(2) {
      padding: 5px 13px;
    }
    .main button {
      width: auto;
      margin: auto;
      font-size: 15px;
      font-weight: bold;
      border-radius: 50px;
      color: #fff;
      padding: 9px 24px;
      background: #aaa;
      opacity: 1;
      transition: opacity .2s ease;
      border: none;
      outline: none;
    }
    .main button:hover {
      opacity: .9;
    }
    .main button:active {
      box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
    }
    /* main color */
    .a-green big,
    .a-green h3 {
      color: #4c7737;
    }
    .a-green h4 {
      color: #4c7737;
    }
    .a-green button {
      background: #4c7737;
    }
    .a-yel big,
    .a-yel h3 {
      color: #ffbb42;
    }
    .a-yel h4 {
      color: #ffbb42;
    }
    .a-yel button {
      background: #ffbb42;
    }
    .a-red big,
    .a-red h3 {
      color: #e13c4c;
    }
    .a-red h4 {
      color: #e13c4c;
    }
    .a-red button {
      background: #e13c4c;
    }
    .a-blue big,
    .a-blue h3 {
      color: #2e5dea;
    }
    .a-blue h4 {
      color: #2e5dea;
    }
    .a-blue button {
      background: #2e5dea;
    }

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<br/>
<br/>
<br/>
<br/>
<section class="container">
  <div class="row white">
    <div class="block">
      <div class="col-xs-12 col-sm-6 col-md-3">
        <ul class="main a-green">
          <li>
            <big>COLLAPSIBLE 1</big>
          </li>
          <li>
            <h4>Acordions</h4>
          </li>
          <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="#collapse1">Collapsible Group 1</a>
                </h4>
              </div>
              <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
                </h4>
              </div>
              <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
                </h4>
              </div>
              <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
              </div>
            </div>
          </div>
        </ul>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-3">
        <ul class="main a-yel">
          <li>
            <big>COLLAPSIBLE 2</big>
          </li>
          <li>
            <h4>Acordions</h4>
          </li>
          <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="#collapse4">Collapsible Group 1</a>
                </h4>
              </div>
              <div id="collapse4" class="panel-collapse collapse in">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Collapsible Group 2</a>
                </h4>
              </div>
              <div id="collapse5" class="panel-collapse collapse">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Collapsible Group 3</a>
                </h4>
              </div>
              <div id="collapse6" class="panel-collapse collapse">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
              </div>
            </div>
          </div>
        </ul>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-3">
        <ul class="main a-blue">
          <li>
            <big>COLLAPSIBLE 3</big>
          </li>
          <li>
            <h4>Acordions</h4>
          </li>
          <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="#collapse7">Collapsible Group 1</a>
                </h4>
              </div>
              <div id="collapse7" class="panel-collapse collapse in">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse8">Collapsible Group 2</a>
                </h4>
              </div>
              <div id="collapse8" class="panel-collapse collapse">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Collapsible Group 3</a>
                </h4>
              </div>
              <div id="collapse9" class="panel-collapse collapse">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
              </div>
            </div>
          </div>
          </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <ul class="main a-red">
            <li>
              <big>COLLAPSIBLE 4</big>
            </li>
            <li>
              <h4>Acordions</h4>
            </li>
            <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="#collapse10">Collapsible Group 1</a>
                  </h4>
                </div>
                <div id="collapse10" class="panel-collapse collapse in">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse11">Collapsible Group 2</a>
                  </h4>
                </div>
                <div id="collapse11" class="panel-collapse collapse">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse12">Collapsible Group 3</a>
                  </h4>
                </div>
                <div id="collapse12" class="panel-collapse collapse">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
            </div>
          </ul>
        </div>
    </div>
      <!-- /block -->
  </div>
    <!-- /row -->
</section>

最佳答案

id 值应该是唯一的，为了使折叠工作，你必须为每个 panel-group 设置不同的 ID 值，与 data 相同-parent 子链接的属性。

<div class="panel-group" id="accordion2">
...
  <a data-toggle="collapse" data-parent="#accordion2" href="">
...
<div class="panel-group" id="accordion3">
...
  <a data-toggle="collapse" data-parent="#accordion3" href="">
...
<div class="panel-group" id="accordion4">
...
  <a data-toggle="collapse" data-parent="#accordion4" href="">

完整代码如下:

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
    body {
      background: #111d27;
      color: #111;
      /*min-width: 320px;*/
      min-width: 1024px;
      font-size: 16px;
      font-weight: 300;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -webkit-backface-visibility: hidden;
      position: relative;
      padding: 50px 20px;
    }
    .main {
      text-align: center;
      color: #777;
      font-size: 14px;
      padding-left: 0;
      margin-bottom: 30px;
      background-color: #F5F5F5;
      font-family: 'Lato';
    }
    .main img {
      display: block;
      margin: auto;
      width: 32px;
    }
    .main li:first-child,
    .main li:last-child {
      padding: 5px 5px 0px 0px;
    }
    .main li {
      list-style: none;
      padding: 13px;
    }
    .main li + li {
      border-top: 1px solid #f0f0f0;
    }
    .main big {
      font-size: 32px;
    }
    .main h3 {
      margin-bottom: 0;
      font-size: 36px;
    }
    .main h4 {
      margin-bottom: 0;
      font-size: 15px;
    }
    .main span {
      font-size: 12px;
      color: #999;
      font-weight: normal;
    }
    .main li:nth-last-child(2) {
      padding: 5px 13px;
    }
    .main button {
      width: auto;
      margin: auto;
      font-size: 15px;
      font-weight: bold;
      border-radius: 50px;
      color: #fff;
      padding: 9px 24px;
      background: #aaa;
      opacity: 1;
      transition: opacity .2s ease;
      border: none;
      outline: none;
    }
    .main button:hover {
      opacity: .9;
    }
    .main button:active {
      box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
    }
    /* main color */
    .a-green big,
    .a-green h3 {
      color: #4c7737;
    }
    .a-green h4 {
      color: #4c7737;
    }
    .a-green button {
      background: #4c7737;
    }
    .a-yel big,
    .a-yel h3 {
      color: #ffbb42;
    }
    .a-yel h4 {
      color: #ffbb42;
    }
    .a-yel button {
      background: #ffbb42;
    }
    .a-red big,
    .a-red h3 {
      color: #e13c4c;
    }
    .a-red h4 {
      color: #e13c4c;
    }
    .a-red button {
      background: #e13c4c;
    }
    .a-blue big,
    .a-blue h3 {
      color: #2e5dea;
    }
    .a-blue h4 {
      color: #2e5dea;
    }
    .a-blue button {
      background: #2e5dea;
    }

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<br/>
<br/>
<br/>
<br/>
  <section class="container">
    <div class="row white">
      <div class="block">
        <div class="col-xs-12 col-sm-6 col-md-3">
          <ul class="main a-green">
            <li>
              <big>COLLAPSIBLE 1</big>
            </li>
            <li>
              <h4>Acordions</h4>
            </li>
            <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="#collapse1">Collapsible Group 1</a>
                  </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
                  </h4>
                </div>
                <div id="collapse2" class="panel-collapse collapse">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
                  </h4>
                </div>
                <div id="collapse3" class="panel-collapse collapse">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
            </div>
          </ul>
        </div>
  
        <div class="col-xs-12 col-sm-6 col-md-3">
          <ul class="main a-yel">
            <li>
              <big>COLLAPSIBLE 2</big>
            </li>
            <li>
              <h4>Acordions</h4>
            </li>
            <div class="panel-group" id="accordion2">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapse4">Collapsible Group 1</a>
                  </h4>
                </div>
                <div id="collapse4" class="panel-collapse collapse in">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapse5">Collapsible Group 2</a>
                  </h4>
                </div>
                <div id="collapse5" class="panel-collapse collapse">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapse6">Collapsible Group 3</a>
                  </h4>
                </div>
                <div id="collapse6" class="panel-collapse collapse">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
            </div>
          </ul>
        </div>
  
        <div class="col-xs-12 col-sm-6 col-md-3">
          <ul class="main a-blue">
            <li>
              <big>COLLAPSIBLE 3</big>
            </li>
            <li>
              <h4>Acordions</h4>
            </li>
            <div class="panel-group" id="accordion3">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion3" href="#collapse7">Collapsible Group 1</a>
                  </h4>
                </div>
                <div id="collapse7" class="panel-collapse collapse in">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion3" href="#collapse8">Collapsible Group 2</a>
                  </h4>
                </div>
                <div id="collapse8" class="panel-collapse collapse">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion3" href="#collapse9">Collapsible Group 3</a>
                  </h4>
                </div>
                <div id="collapse9" class="panel-collapse collapse">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </div>
              </div>
            </div>
            </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <ul class="main a-red">
              <li>
                <big>COLLAPSIBLE 4</big>
              </li>
              <li>
                <h4>Acordions</h4>
              </li>
              <div class="panel-group" id="accordion4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion4" href="#collapse10">Collapsible Group 1</a>
                    </h4>
                  </div>
                  <div id="collapse10" class="panel-collapse collapse in">
                    <div class="panel-body">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion4" href="#collapse11">Collapsible Group 2</a>
                    </h4>
                  </div>
                  <div id="collapse11" class="panel-collapse collapse">
                    <div class="panel-body">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion4" href="#collapse12">Collapsible Group 3</a>
                    </h4>
                  </div>
                  <div id="collapse12" class="panel-collapse collapse">
                    <div class="panel-body">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
              </div>
            </ul>
          </div>
      </div>
        <!-- /block -->
    </div>
      <!-- /row -->
  </section>

关于javascript - 为什么 Accordion 类会触发其他名称不同的面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38006526/

文章推荐： html - 如何在 HTA 中使输出可选

文章推荐： html - 反向重复线性渐变

文章推荐： c# - 如何从网络流字符串中删除提到的字符

文章推荐： html - 具有绝对定位的 Div 未占据 TD 的全高(IE 问题)

c++ - 如何将字符串数组的值分配给 "Name"+ #，例如。名称 1、名称 2、名称 3 等。C++
我正在尝试做这样的事情:Name[i] = "Name"+ (i+1) 在 forloop 中，这样数组的值将是:Name[0] = Name1，Name[1] = Name2，Name[2] = N
javascript - 如何从Javascript或JQuery获取Grails中的 Action 名称(或 View 名称)
我读了here，在GSP中我们可以这样写: ${params.action} 从GSP中，我们可以使用${params.action}作为参数调用Javascript函数(请参阅here)。是否有其
java - 如何解析名称=值^^名称=值^^名称=值
我的问题:非常具体。我正在尝试想出解析以下文本的最简单方法: ^^domain=domain_value^^version=version_value^^account_type=account_ty
cakephp 路由修改 Controller 名称/获取 Controller 名称
我创建了一条与此类似的路线: Router::connect("/backend/:controller/:action/*"); 现在我想将符合此模式的每个 Controller 路由重命名为类似
sql - 警告 SQL71502 - 过程 <名称> 具有对对象 <名称> 的未解析引用
我在 Visual Studio 2013 项目中收到以下警告: SQL71502 - Procedure has an unresolved reference to object 最佳答案这可以
c# - 名称/值 .NET 集合或 .NET 名称/值字典？
任何人都可以指导我使用名称/值 .NET 集合或 .NET 名称/值字典以获得最佳性能吗？请问最好的方法是什么？我的应用程序是 ASP.NET、WCF/WF Web 应用程序。每个集合应该有 10 到
php - Zend Framework 2中如何获取 Controller 名称、 Action 名称
我在 Zend Framework 2 中有一个默认模块: namespace Application\Controller; use Zend\Mvc\Controller\AbstractActi
javascript - 在 javascript 中，这是一个有效的结构吗？ : document. 名称.名称.值？
这是表格: 关于javascript - 在 javascript 中，这是一个有效的结构吗？ : document. 名称.名称.值？，我们在Stack Overflow上找到一个类似的
asp.net-mvc - 给定 htmlHelper + Action 名称，如何找出 Controller 名称？
HtmlHelper.ActionLink(htmlhelper,string linktext,string action) 如何找出正确的路线？如果我有这个=> HtmlHelper.Actio
javascript - Angular Directive(指令) > 动态 Controller 名称 > 插值 Controller 名称
我需要一些有关如何将 Controller 定义传递给嵌套在 outer 指令中的 inner 指令的帮助。请参阅http://plnkr.co/edit/Om2vKdvEty9euGXJ5qan一个
algorithm - 排行榜的高效数据结构，即记录列表(名称、积分) - 高效搜索(名称)、搜索(排名)和更新(积分)
请提出一个数据结构来表示内存中的记录列表。每条记录由以下部分组成: 用户名积分排名(基于积分)- 可选字段- 可以存储在记录中或可以动态计算数据结构应该支持高效实现以下操作: Insert(re
apache-spark - Spark : Union can only be performed on tables with the compatible column types. 结构<名称，ID> != 结构
错误 : 联合只能在具有兼容列类型的表上执行。结构(层:字符串，skyward_number:字符串，skyward_points:字符串)<> 结构(skyward_number:字符串，层:字符
scala - 名称/惰性函数的重复参数
我想要一个包含可变数量函数的函数，但我希望在实际使用它们之前不要对它们求值。我可以使用 () => type 语法，但我更愿意使用 => type 语法，因为它似乎是为延迟评估而定制的。当我尝试这样
当前本地键盘映射的 Emacs 名称？
我正在编写一个 elisp 函数，它将给定键永久绑定(bind)到当前主要模式的键盘映射中的给定命令。例如， (define-key python-mode-map [C-f1] 'pytho
r - “名称”属性的长度必须与向量的长度相同
卡在R中的错误上。 Error in names(x) <- value : 'names' attribute must be the same length as the ve
python - 正则表达式从字符串中提取用户名/名称
我有字符串，其中包含名称，有时在字符串中包含用户名，后跟日期时间戳: GN1RLWFH0546-2020-04-10-18-09-52-563945.txt JOHN-DOE-2020-04-10-1
c# - 名称 `Array'在当前上下文中不存在
有人知道为什么我会收到此错误吗？这显示将我的项目升级到新版本的Unity3d之后。 Error CS0103: The name `Array' does not exist in the curre
Delphi:从数据集中读取列数+名称？
由于 Embarcadero 的 NNTP 服务器从昨天开始就停止响应，我想我可以在这里问:我使用非数据库感知网格，我需要循环遍历数据集以提取列数、它们的名称、数量行数以及每行中每个字段的值。我知道
android - 在根项目的gradle子项目中设置Android版本代码/名称
在构建Android应用程序的子项目中，我试图根据根build.gradle中的变量设置版本代码/名称。子项目build.gradle: apply plugin: 'com.android.app
javascript - 如何在不使用硬编码字符串的情况下传递javascript属性(名称)？
示例用例: 我有一个带有属性“myProperty”的对象，具有 getter 和 setter(自 EcmaScript 5 起支持“Property Getters 和 Setters”:http

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么 Accordion 类会触发其他名称不同的面板