Menu dropdown vanilla js

Question

Witam napisałem kod do obsługi dropdown menu . Jak poprawić kod żeby otwierał jedno menu i zamykał inne.

const dropdowns = document.querySelectorAll('.sub-menu');
if (dropdowns.length > 0) {
	dropdowns.forEach(dropdown => {
		dropdown.addEventListener('click', (e) => {
			e.stopPropagation();
			dropdown.classList.toggle('active');
		});
	});
};

 

Answer 1

nie polecam takiego rozwiązania. Polecam proste ale i działające w Jquery i JavaScript. Sprawdź menu na stronie https://aurolia-css.github.io. Jak chcesz kod to chętnie podam. (otwiera jedno i zamyka drugie)

Comments

Dziękuję . Chciałem spróbować napisać kod w czystym js bo wszyscy krzyczą że jquery to zło wcielone.

---

Też trochę uważam że to zło ale polecam, Jquery na rok 2k19 jest mocno przestarzałe. Nawet za bardzo. Ale np. stwożenie elementu <select> i zmienić jego wygląd (w 100%) jest prawie niemożliwe bez Jquery... (Da się ale jest trudne i bardzo czasochłonne). Jquery nadaje się idealnie do interakcji użytkownika, działa wspaniale z Vanilla JS (czystym JS). Grzechem jest napisać stronę tylko w Jquery ale normalną rzeczą jest napisanie jej w Jquery i czystym JS

---

Witam mogę jednak prosić o kod

Pozdrawiam

---

Dobrze akurat planowałem dodać go do dokumentacji za parę dni ale pojawi się już dzisiaj tutaj :) Proszę o to on: 

<!-- SKRYPTY (ŻEBY DZIAŁAŁO -->

<!-- JS & CSS FILES -->
<script src="https://aurolia-css.github.io/download/jquery.min.js"></script>
<script src="https://aurolia-css.github.io/download/jquery-ui.min.js"></script>
<script src="https://aurolia-css.github.io/lib/vue/vue.js"></script>
<link rel="stylesheet" href="https://aurolia-css.github.io/lib/fontawesome/css/all.css">
<link rel="stylesheet" href="https://aurolia-css.github.io/lib/css/style.css">
<script src="https://aurolia-css.github.io/lib/js/index.js" defer></script>
<link rel="stylesheet" href="https://aurolia-css.github.io/download/aurolia.css">
<script src="https://aurolia-css.github.io/download/aurolia.js"></script>
<script src="https://aurolia-css.github.io/lib/prism/prism.min.js"></script>
<!-- /JS & CSS FILES -->

<!-- /SKRYPTY (ŻEBY DZIAŁAŁO -->









<!-- NAWIGACJA -->
<span class="openbtn" onclick="openNav()"><i class="fas fa-bars"></i></span>
<div id="nav" class="overlay">
<a href="javascript:void(0)" class="close" onclick="navclose()"><i class="fas fa-times"></i></a>
<div class="overlay-content">
<a href="https://aurolia-css.github.io" class="ripple ripple-effect show2">Aurolia.css</a>
<a href="/start" class="ripple ripple-effect show2">Get Started</a>
<ul class="accordion" id="accordion">
<li class="accordion__list">
<div class="link"><span class="link__title show2 ripple ripple-effect">CSS <i class="fa fa-chevron-down ripple ripple-effect radius-5px"></i></span></div>
<ul class="submenu">
<li><a href="/grid" class="show ripple ripple-effect">Grid</a></li>
<li><a href="/format" class="show ripple ripple-effect">Text Format</a></li>
<li><a href="/color" class="show ripple ripple-effect">Color</a></li>
<li><a href="/shadow" class="show ripple ripple-effect">Shadow</a></li>
<li><a href="/pulse" class="show ripple ripple-effect">Pulse</a></li>
<li><a href="/typography" class="show ripple ripple-effect">Typography</a></li>
<li><a href="/tooltip" class="show ripple ripple-effect">Tooltip</a></li>
<li><a href="/ripple" class="show ripple ripple-effect here">Ripple</a></li>
<li><a href="/footer" class="show ripple ripple-effect">Footer</a></li>
<li><a href="/buttons" class="show ripple ripple-effect">Buttons</a></li>
<li><a href="/paralax" class="show ripple ripple-effect">Paralax</a></li>
</ul>
</li>
<li class="accordion__list">
<div class="link"><span class="link__title show2 ripple ripple-effect">JS <i class="fa fa-chevron-down ripple ripple-effect radius-5px"></i></span></div>
<ul class="submenu">
<li><a href="/gallery" class="show ripple ripple-effect">Gallery</a></li>
<li><a href="/preloader" class="show ripple ripple-effect">Preloader</a></li>
<li><a href="/nav" class="show ripple ripple-effect">Nav</a></li>
<li><a href="/carousel" class="show ripple ripple-effect">Carousel</a></li>
<li><a href="/dropdown" class="show ripple ripple-effect">Dropdown</a></li>
<li><a href="/snackbar" class="show ripple ripple-effect">Snackbar</a></li>
</ul>
</li>
<li class="accordion__list">
<div class="link"><span class="link__title show2 ripple ripple-effect">Forms <i class="fa fa-chevron-down ripple ripple-effect radius-5px"></i></span></div>
<ul class="submenu">
<li><a href="/select" class="show ripple ripple-effect">Select</a></li>
<li><a href="/inputs" class="show ripple ripple-effect">Text Inputs</a></li>
<li><a href="/radio" class="show ripple ripple-effect">Radio Buttons</a></li>
<li><a href="/pickers" class="show ripple ripple-effect">Pickers</a></li>
<li><a href="/switches" class="show ripple ripple-effect">Switches</a></li>
<li><a href="/range" class="show ripple ripple-effect">Range</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /NAWIGACJA -->

/* STYL CSS */


/* MENU */

.accordion {
width: 100%;
display: flex;
text-align: center;
flex-wrap: wrap;
transition: color 500ms !important;
}

.accordion__list {
width: 100%;
list-style: none;
transition: 500ms !important;
}

.accordion__list .link {
font-size: 0.85em;
color: #fff;
cursor: pointer;
display: block;
position: relative;
transition: 500ms !important;
}

i {
transition: transform 500ms;
}

.accordion__list .link__title {
font-size: 36px;
padding: 8px;
position: relative;
box-sizing: border-box;
width: 100%;
display: block;
background-color: transparent;
color: #fff !important;
transition: 500ms !important;
}

.accordion__list .link__title:hover {
color: #00a3a3 !important;
transition: 500ms !important;
}

.accordion li:last-child .link {
border-bottom: 0;
transition: 500ms !important;
}


.accordion li.open .link {
color: #000 !important;
transition: 500ms !important;
}

.accordion li.open i {
color: #00a3a3 !important;
}

.accordion li.open i.fa-chevron-down {
transform: rotate(180deg);
}

.accordion li i.fa-chevron-down {

}


.submenu {
display: none;
font-size: 0.95em;
}

.submenu li {
list-style: none;
transition: 500ms !important;
}

.submenu a {
display: block;
text-decoration: none;
color: #fff !important;
transition: 500ms !important;
padding: 1rem;
text-align: center;
}

.submenu a:hover {
color: #00a3a3;
transition: 500ms !important;
}

.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 500ms;
}

.overlay-content {
position: relative;
top: 25%;
text-align: center;
margin-top: 30px;
}

.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
text-align: center !important;
color: #fff;
display:flex;
justify-content:center;
align-items:center;
transition: 500ms !important;
}

.overlay a:hover {
color: #00a3a3 !important;
transition: 500ms !important;
}

.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 50px;
color: #fff;
}

.openbtn {
height: 50px;
width: 50px;
font-size: 30px;
padding: 5px;
line-height: 43px;
text-align: center;
border-radius: 100%;
margin: 10px;
z-index: 9998;
cursor: pointer;
color: #000;
transition: 500ms;
margin: 10px;
position: fixed;
background: #fff !important;
box-shadow: 0 0px 10px 0 rgba(119,119,119,0.5);
}

.openbtn:hover {
color: #fff;
transition: 500ms;
background: rgba(0, 163, 163, 1.0) !important;
box-shadow: 0 0px 10px 0 rgba(119,119,119,0.5);
}

.here {
background: rgba(0, 163, 163, 0.2) !important;
}

/* /MENU */


/* /STYL CSS */

/* NAV DROP */

$(function(){
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var link = this.el.find('.link');
link.on('click', {el: this.el, multiple: this.multiple},this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if(!e.data.multiple){
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
}
}
var accordion = new Accordion($('#accordion'), false);
});

/* NAV DROP */






/* NAV */

function openNav() {
document.getElementById("nav").style.width = "100%";
}
function navclose() {
document.getElementById("nav").style.width = "0%";
}

/* /NAV */

Raczej działa :) jak coś to tutaj masz linka:

 

https://aurolia-css.github.io i wyświetl sobie kod źródłowy tam będzie wszystko w odpowiednich plikach.

---

Dziękuję

---

Dziękuje i najpierw sprawdź czy działa  jak coś nie działa to powiedz wyśle nowy kod :)

---

Kod napisany wspólnie z jquery działa jednak nie chciałbym ładować całej biblioteki do

obsługi menu rozwijanego, chciałem napisać w czystym javascripcie kod na  obsługę  menu .

---

Sprawdź https://codepen.io/topic/accordion/picks Polecam :)