摺疊一個div並打開另一個引導程序

我正在使用Bootstrap，並試圖使用摺疊。我想要div #film隱藏，當我點擊<li class="rekruterring>，我錯過了一些東西。無論我做什麼，它都不會關閉，我嘗試使用手風琴，data-parents，javascript，並且當我單擊.rekruterring和#rekruttering div時，沒有任何內容會使#film div隱藏。摺疊一個div並打開另一個引導程序

以下是我的代碼，請注意#rekruterring正在擴大，但不會隱藏#film。

/* Latest compiled and minified JavaScript included as External Resource */ 
 

 
/* DOES NOTHING */ 
 
$(document).ready(function() { 
 
    $(".rekruttering").click(function() { 
 
    $("#film").collapse('hide'); 
 
    }); 
 
})

/* 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; 
 
}

<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>

來源

2016-04-28 Thomas Thomsen

爲什麼你創建第三部分的鏈接？ Stackoverflow爲您的代碼提供了在頁面中執行的選項 *** https：//blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/** * –

不知道這是一個功能。我已將它添加到我的問題中。謝謝你讓我知道。 –

這不是工作，因爲使用parent類時，有一個引導的錯誤/問題。它依靠使用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">

來源

2016-04-28 14:37:04 Tricky12

非常感謝。你將最後一根頭髮保存在我的頭上:-) –

@ThomasThomsen沒問題，樂於幫忙！ – Tricky12

摺疊一個div並打開另一個引導程序

回答

相關問題