Question

我正在使用Bootstrap而我正在尝试使用折叠。当我点击#film并且我错过了某些内容时，我希望隐藏div <li class="rekruterring>。它无论我做什么都不会结束，我已经尝试过手风琴，data-parents，javascript当点击{#film时，没有任何东西可以隐藏.rekruterring div 1}}和#rekruttering div显示。

这是我的代码，请注意#rekruterring正在扩展，但不会隐藏#film。

＆＃13;

/* Latest compiled and minified JavaScript included as External Resource */

/* DOES NOTHING */
$(document).ready(function() {
  $(".rekruttering").click(function() {
    $("#film").collapse('hide');
  });
})

＆＃13;

/* VIMEO */

img {
  max-width: 100%;
  height: auto;
}
.video {
  background: #fff;
  padding-bottom: 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  width: 100%;
  /* Thumbnails 5 across */
  margin: 1%;
}
.video img {
  width: 100%;
  opacity: 1;
}
.video img:hover,
.video img:active,
.video img:focus {
  opacity: 0.75;
}
.categories li {
  list-style-type: none;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="accordion" class="container">
  <div class="row">
    <div class="col-lg-12 text-center">
      <h2 class="section-heading">Galleri</h2>
      <hr class="bg-primary">
    </div>
    <div class="col-lg-12 categories text-center">
      <ul>
        <a class="film" data-toggle="collapse" data-target="#film" data-parent="#accordion">Firmapræsentation</a> |
        <a class="rekruterring" data-toggle="collapse" data-target="#rekruterring" data-parent="#accordion">Rekruterringsfilm</a> |
        <li>TV -/Biografspots & Imagefilm</li>|
        <li>Salgs- & Produktfilm</li>
      </ul>
    </div>
  </div>

  <div id="film" class="row text-centered collapse in">
    <div class="col-lg-3 text-centered">
      <article class="video">
        <figure>
          <a class="" href="//vimeo.com/1084537" data-lity>
            <img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
          </a>
        </figure>
        <h3 class="videoTitle" style="text-align:center;">FILM</h3>
      </article>
    </div>

    <div class="col-lg-3 text-centered">
      <article class="video">
        <figure>
          <a class="" href="//vimeo.com/1084537" data-lity>
            <img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
          </a>
        </figure>
        <h3 class="videoTitle" style="text-align:center;">FILM</h3>
      </article>
    </div>

    <div class="col-lg-3 text-centered">
      <article class="video">
        <figure>
          <a class="" href="//vimeo.com/1084537" data-lity>
            <img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
          </a>
        </figure>
        <h3 class="videoTitle" style="text-align:center;">FILM</h3>
      </article>
    </div>

    <div class="col-lg-3 text-centered">
      <article class="video">
        <figure>
          <a class="" href="//vimeo.com/1084537" data-lity>
            <img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
          </a>
        </figure>
        <h2 class="videoTitle" style="text-align:center;">FILM</h2>
      </article>
    </div>

  </div>
  <!-- FILM -->


  <div id="rekruterring" class="row text-centered collapse">
    <div class="col-lg-3 text-centered">
      <article class="video">
        <figure>
          <a class="" href="//vimeo.com/1084537" data-lity>
            <img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
          </a>
        </figure>
        <h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
      </article>
    </div>

    <div class="col-lg-3 text-centered">
      <article class="video">
        <figure>
          <a class="" href="//vimeo.com/1084537" data-lity>
            <img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
          </a>
        </figure>
        <h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
      </article>
    </div>


    <div class="col-lg-3 text-centered">
      <article class="video">
        <figure>
          <a class="" href="//vimeo.com/1084537" data-lity>
            <img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
          </a>
        </figure>
        <h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
      </article>
    </div>

    <div class="col-lg-3 text-centered">
      <article class="video">
        <figure>
          <a class="" href="//vimeo.com/1084537" data-lity>
            <img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
          </a>
        </figure>
        <h2 class="videoTitle" style="text-align:center;">REKRUTERRING</h2>
      </article>
    </div>

  </div>
  <!-- REKRUTERRING -->

</div>

＆＃13;

Answer 1

这不起作用，因为使用parent类时存在Bootstrap错误/问题。它依赖于使用围绕panel元素的collapse类。

https://github.com/twbs/bootstrap/issues/10966

Updated JSFiddle

<div class="panel">
    <div id="film" class="row text-centered collapse in">

<div class="panel">
    <div id="rekruterring" class="row text-centered collapse">

折叠div并打开另一个bootstrap

1 个答案: