Ako vytvoriť rozbaľovací zoznam a tlačiť obsah nižšie? - jquery, html, css

Zostal som na jednom mieste ... Mám tento kód: odkaz

Animácia pre bočný navigátor funguje takmer tak, ako by som chcela, ale keď kliknem na jednu možnosť, otvorí sa všetkým. Chcel by som získať podobný efekt ako na nasledujúcej stránke: odkaz

$(document).ready(function() {
$(".interfejs, .procesor, .dane, .grafika, .linux, .sieci").click(function() {
$(".dropdown-content").toggleClass("visible-dropdown");
})
})
/*===Site nav content===*/

.nav-header {
width: 100%;
height: 65px;
position: relative;
text-align: center;
}

.nav-header h2 {
color: #fcfcfc;
font-size: 33px;
font-weight: 800;
letter-spacing: 1px;
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 0 13px;
background-color: #011018;
z-index: 1;
width: auto;
display: inline-block;
text-shadow: 0px 0px 4px black;
}

.nav-header:after {
content: "";
background-color: #f5f5f5;
height: 1px;
width: 100%;
position: absolute;
top: 50%;
left: 0;
margin-top: -0.5px;
}

.nav-menu {
position: relative;
}

.nav-menu a {
padding: 15px 8px 15px 32px;
margin-left: 20px;
text-decoration: none;
font-size: 20px;
font-weight: 200;
letter-spacing: 1px;
color: #818181;
background-color: #011018;
display: block;
transition: 0.3s;
position: relative;
}

.nav-menu a:hover {
background-color: #212E35;
color: #f5f5f5;
letter-spacing: 2px;
font-weight: 500;
}

.fa-angle-double-down {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5px;
}


/*===dropdown-content===*/

.dropdown-content {
text-decoration: none;
color: #fff;
height: 0;
transition: 0.3s height;
background-color: #081d2a;
box-shadow: inset 4px 4px 10px #05141D;
margin-left: 20px;
}

.visible-dropdown {
height: 100px;
}

.dropdown-content li {
padding: 2px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav class="site-nav">
<header class="nav-header">
<h2>Spis treści</h2>
</header>
<section class="nav-menu">
<a href="#" class="interfejs"><span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span>Interfejsy</a>
<ul class="dropdown-content">
<li>jeden</li>
<li>dwa</li>
<li>jeden</li>
<li>dwa</li>
</ul>
<hr>
<a href="#" class="procesor">Procesory<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<ul class="dropdown-content">
<li>jeden</li>
<li>dwa</li>
<li>jeden</li>
<li>dwa</li>
</ul>
<hr>
<a href="#" class="dane">Przechowywanie danych<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<ul class="dropdown-content">
<li>jeden</li>
<li>dwa</li>
<li>jeden</li>
<li>dwa</li>
</ul>
<hr>
<a href="#" class="grafika">Grafika<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<ul class="dropdown-content">
<li>jeden</li>
<li>dwa</li>
<li>jeden</li>
<li>dwa</li>
</ul>
<hr>
<a href="#" class="linux">Linux<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<ul class="dropdown-content">
<li>jeden</li>
<li>dwa</li>
<li>jeden</li>
<li>dwa</li>
</ul>
<hr>
<a href="#" class="sieci">Sieci komputerowe<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<ul class="dropdown-content">
<li>jeden</li>
<li>dwa</li>
<li>jeden</li>
<li>dwa</li>
</ul>
</section>
<!-- <button class="hamburger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button> -->
</nav>

odpovede:

0 pre odpoveď č. 1

Musíte otvoriť iba ten, na ktorý ste klikli, a zatvorte všetky, ktoré sú otvorené. Toto bude nasledovné:

    <script>
$(document).ready(function(){
$(".interfejs, .procesor, .dane, .grafika, .linux, .sieci").click(function(){
// First close the one that"s open
$(".dropdown-content").removeClass("visible-dropdown");
// Then open the one that"s clicked on
$(this).next(".dropdown-content").addClass("visible-dropdown");
})
})
</script>

0 pre odpoveď č. 2

Gerardova odpoveď je správna, aj keď by bolo oveľa čistejšie a oveľa viac škálovateľné, aby sa zameriaval iba na jednu triedu ... nie na každú triedu menu.

$(".js-dropdown-toggle").on("click", function(e) {
e.preventDefault();

var $dropdownContent = $(".dropdown-content");
$dropdownContent.removeClass("visible-dropdown");
$(this).next(".dropdown-content").toggleClass("visible-dropdown");
});

https://jsfiddle.net/q5qv6ejj/


Súvisiace otázky
Ponuka