ड्रॉपडाउन सूची कैसे बनाएं और नीचे सामग्री को पुश करें? - jquery, एचटीएमएल, सीएसएस

मैं एक स्थान पर फंस गया हूं ... मुझे यह कोड मिला है: संपर्क

साइड नेविबार के लिए एनीमेशन लगभग वांछित काम करता है, लेकिन जब मैं एक विकल्प पर क्लिक करता हूं, तो यह उन सभी को खोलता है। मैं निम्नलिखित पृष्ठ पर सिमिलर प्रभाव प्राप्त करना चाहता हूं: संपर्क

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

उत्तर:

जवाब के लिए 0 № 1

आपको केवल उस व्यक्ति को खोलने की ज़रूरत है जिस पर क्लिक किया गया है और जो भी खुला है उसे बंद करें। निम्नलिखित करेंगे:

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

जेरार्ड का जवाब सही है, हालांकि यह केवल 1 वर्ग को लक्षित करने के लिए बहुत साफ और अधिक स्केलेबल होगा ... प्रत्येक मेनू वर्ग नहीं।

$(".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/


संबंधित सवाल
सबसे लोकप्रिय