Ich benutze Bootstrap und versuche den Collapse zu benutzen. Ich möchte das div #film
verstecken, wenn ich auf die <li class="rekruterring>
klicke und mir etwas fehlt. Es wird nicht schließen, egal was ich tue, ich habe versucht mit Akkordeon, data-parents
, javascript
und nichts macht die #film
div verstecken, wenn ich auf die .rekruterring
klicke und die #rekruttering
div angezeigt wird.Einen div einklappen und einen weiteren bootstrap öffnen
Hier ist mein Code und beachten Sie, dass die #rekruterring
erweitert wird, wie es sollte, aber nicht versteckt #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>
Warum erstellen Sie dritten Verbindungsteil? Stackoverflow bietet eine Option für die Ausführung Ihres Codes auf einer Seite *** https: //blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/** * –
Wusste nicht, dass das ein Feature war. Ich habe es meiner Frage hinzugefügt. Danke für die Information. –