Pokaż/ukryj menu (lista pionowa)

Question

Witam. Mam problem z pokazaniem/ukryciem menu.

Otóż mam taką listę:

<ol>
	<li class="glowna"><a href="#" class="element-w-menu" onClick="pokazUkryj();">Statystyka</a></li>
		<ul id="lista">
			<li><a href="" class="element-w-menu-a">Średnia ważona</a></li>
		</ul>
	<li class="glowna" onClick="pokazUkryj();"><a href="#" class="element-w-menu">Kombinatoryka</a></li>
		<ul id="lista">
			<li><a href="" class="element-w-menu-a">Reguła mnożenia<</li>
		</ul>
</ol>

Oraz napisałem do tego taki skrypcik: 

<script type="text/javascript">
	
	function pokazUkryj()
	{
		var ul = document.getElementById('lista');
		
		if(ul.style.display=="none"){
			ul.style.display = "block";
		}
		else{
			ul.style.display = "none";
		}
	}
</script>

Na pierwszym elemencie w menu (statystyka) działa świetnie. Niestety na drugim elemencie (kombinatoryka) rozwija się podmenu ze statystyki.

Okej, w dokumencie może być tylko jedno ID - rozumiem czemu to nie działa i dlaczego tak się dzieje. Póki co tworzę proste strony i szlifuje bardziej html/css. Js dosłownie tylko liznąłem, dlatego nie potrafię znaleść rozwiązania. Nadanie każdemu elementowi z listy ID i skopiowanie skryptu tyle razy ile elementów - jest to jakieś wyjście, jednakże bardzo nieoptymalne. Czy istnieje jakaś funkcja w JS która pozwoli mi na ukrycie/pokazanie podmenu?

Comments

Polecam zapoznać się z EventDelegation:

https://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/

https://davidwalsh.name/event-delegate

http://tutorials.comandeer.pl/js-beauty.html#delegation

Answer 1

Na początku stwórz poprawną strukturę HTML:

<ol>
    <li class="glowna">
        <a href="#" class="element-w-menu" onClick="pokazUkryj();">Statystyka</a>
        <ul>
            <li><a href="" class="element-w-menu-a">Średnia ważona</a></li>
        </ul>
    </li>
    <li class="glowna" onClick="pokazUkryj();">
        <a href="#" class="element-w-menu">Kombinatoryka</a>
        <ul>
            <li><a href="" class="element-w-menu-a">Reguła mnożenia<</li>
        </ul>
    </li>
</ol>

Usuń JS z HTMLa - nie mieszaj języków, ponieważ robi się bałagan:

<ol>
    <li class="glowna">
        <a href="#" class="element-w-menu">Statystyka</a>
        <ul>
            <li><a href="" class="element-w-menu-a">Średnia ważona</a></li>
        </ul>
    </li>
    <li class="glowna">
        <a href="#" class="element-w-menu">Kombinatoryka</a>
        <ul>
            <li><a href="" class="element-w-menu-a">Reguła mnożenia<</li>
        </ul>
    </li>
</ol>

Zamiast definiować style w JS, do ukrywania elementów, posłuży nam specjalna klasa, którą stworzymy w CSS ( jak wyżej, nie mieszamy języków )

.hide {
  display: none !important;
}

Dalej zostaje tylko implementacja w JS:

var menuLinks = document.getElementsByClassName('element-w-menu');
// zaznacz odpowiednie linki

for( var i = 0; i < menuLinks.length; i++ ) {
  // wykonaj pętlę tyle razy, ile jest linków
  
  menuLinks[ i ].addEventListener('click', function() {
    // do każdego linku dodaj nasłuchiwanie zdadzenia - click
    
    // obiekt this, wskazuje na kliknięty element
    
    var submenu = this.nextElementSibling; 
    // pobierz element za nim -> ul
   
    submenu.classList.toggle('hide'); 
    // zmień w nim klasę hide - tzn jeśli jej nie ma,
    // to ją dodaj, jeśli jest, to ją usuń
  });
}

 

Comments

Dziękuję za jasne wytłumaczenie :)

---

@niezalogowany, Twój kod JSa można zapisać nieco krócej czyściej / bardziej optymalnie :)

var parent = document.querySelector( 'ol' );
parent.addEventListener( 'click', function( ev ) {
  var t = ev.target;
  
  if ( t.classList.contains( 'element-w-menu' ) )
    t.nextElementSibling.classList.toggle( 'hide' );
} );

Z CSS można wyrzucić !important.

---

Tak, EventDelegation jest znacznie bardziej schludnym rozwiązaniem. Uznałem jednak, że nie ma co mieszać początkującemu w głowie. ( A może lepiej własnie przedstawić taką metodę? )

!important się przyda -> co jeśli nadpiszę sobie atrybut Display? na przykład selektorem o większej specyficzności? .hide to .hide -> nie jakieś debugowanie później nie wiadomo czego.

---

Hahaha.. Krzycho92, co ja własnie napisałem : ))) przepraszam, roztargniony jestem. 

Już poprawiam

---

Bez pętli się nie obejdzie -> chyba, że zastosujemy Event Delegation

Tak też i zrobiłem.

jeszcze jest ES6 : )

Nom. Dla zmiennej menuLinks można nawet dać const, bo przecież jej nie modyfikujesz tylko odpalasz na niej pętlę :)

!important się przyda -> co jeśli nadpiszę sobie atrybut Display?

Dać selektor .obecna-klasa.hide i tam zapisać display: none? 

[edit]

Edytowałeś swój post zanim ja zdążyłem napisać ten ;)

---

Dać selektor .obecna-klasa.hide i tam zapisać display: none?

Nie chcę, żeby poprawne ukrywanie elementów, było uzależnione od tego, czy jest odpowiednio do tego zadania stworzony CSS.

Druga sprawa.. pracując w grupie.. już z pewnością nikt się nie będzie nad tym zastanawiał.

---

Okej, a jak zrobić, żeby po załadowaniu strony od razu menu było schowane? Jakaś kolejna pętla?

---

dodaj klasy .hide do elementów, które chcesz, aby były schowane : )

---

Nie chcę, żeby poprawne ukrywanie elementów, było uzależnione od tego, czy jest odpowiednio do tego zadania stworzony CSS.

Ale w tym przypadku kod nie będzie elastyczny, bo !important już nie nadpiszesz.

Druga sprawa.. pracując w grupie.. już z pewnością nikt się nie będzie nad tym zastanawiał.

To akurat jest wredne. Na praktykach miałem przerabiać projekt, który był stylowany (i w ogóle tworzony) z 10 lat temu. Zawierał mnóstwo zagnieżdżonych <table> służących jako struktura strony, pomieszane polskie nazwy klas z angielskimi, mieszanie styli inline z CSSowymi, no i oczywiście gdzieniegdzie !important, który skutecznie utrudniał mi znalezienie przyczyny dlaczego moja zmiana nie odnosi skutku. Dopiero, po przejrzeniu dokładnie styli i elementów, które były nad tym moim docelowym - dostrzegałem !important. Ale ile razy napisałem bardzo specyficzną ścieżkę CSS, żeby coś wydłubać - bo nie miałem dostępu do HTMLa (jakieś Java Richface to produkowały - nie znam się na backendzie) - to już nie liczyłem. Nie mogłem po prostu nadać danemu elementowi klasy (nie miałem dostępu do "produkowanego" HTMLa) i go sobie ostylować. Musiałem CSSem specjalnie go szukać i nie zawsze się to udawało. Dopiero, gdy powiedziałem opiekunowi, że trudno mi będzie zmieniać style bez dodawania własnych klas do danego elementu HTML - dali mi dostęp do niego.

Dlatego, podczas pracy w grupie nad dużym projektem, na prawdę lepiej jeśli każdy dba o kod, bo podczas zmiany czegoś okazuje się, że zmiana nie przynosi efektu przez takie przykładowe !important.

---

Oczywiście, nie używamy* !important w CSSsie, tutaj nawet nie mamy o czym dyskutować.

* -> potrzebujemy ukryć element JavaScriptem -> mamy dwie opcję

1. el.style.display = 'none' -> de facto dodanie CSSa inline
2. el.classList.toggle('klasa-z-important-none')

w przypadku drugim, nie musimy się męczyć z żadnymi ifami ( if el.style.display === 'none' ) el.style.display = 'nienon' else coś tam bla bla, nie mieszamy JSa z CSSem... chociaż tutaj to już argument trochę na siłę : )

Ogólnie własnie o to chodzi, żeby JS był ważniejszy od CSSa, Nie ma po co nadpisywać .hide