Autor | Zpráva | ||
---|---|---|---|
Viktor 36 Profil |
Ahojte,
Na webe mám vysúvacie menu. Cez jquery som urobil štýl pre zvýraznenie položky v menu, keď je otvorená daná stránka (highlight). Všetko funguje dobre, ale chcel by som, aby sa mi zvýraznila aj položka v hlavnom menu, keď je zvýraznená položka v jej submenu. Už som googlil dosť veľa a skúsil viacero možností, ale zatiaľ mi nič nefungovalo. Napr. Keď budem na stránke "Link 7", tak sa v menu zvýrazní "Link 7", ale aj Menu 1". Potreboval by som podobne aj na stránke Sublink zvýrazňovať sublink, link aj položku v hlavnom menu. HTML kód <ul id="nav" class="dropdown dropdown-horizontal"> <li class="first highlight"><a href="">Domov</a></li> <li class="main"><span class='dir'>Menu 1</span> <ul> <li><a href=''>Link 1</a></li> <li><a href=''>Link 2</a></li> <li><span class='dir'>Link 3</span> <ul> <li><a href=''>Sublink 1</a></li> <li><a href=''>Sublink 2</a></li> <li><a href=''>Sublink 3</a></li> <li><a href=''>Sublink 4</a></li> <li><a href=''>Sublink 5</a></li> </ul></li> <li><a href=''>Link 4</a></li> <li><a href=''>Link 5</a></li> <li><a href=''>Link 6</a></li> <li><a href=''>Link 7</a></li> </ul> </li> <li class="main"><a href="">Menu 2</a></li> <li class="main"><a href="">Menu 3</a></li> </ul> JQuery // Toto funguje $(document).ready(function(){ var str=location.href.toLowerCase(); $("#nav li a").each(function() { if (str.indexOf(this.href.toLowerCase()) > -1) { $("li.highlight").removeClass("highlight"); $(this).parent().addClass("highlight"); } }); }); // Toto nefunguje, malo by to zvýrazniť položku v hlavnom menu, ak je zvýraznená položka v jej submenu. $('ul.dropdown li').each(function(){ var $this = $(this); if($this.hasClass('highlight')){ $this.closest('li').addClass('highlight'); } }); Použil som toto, ale nejde to... http://stackoverflow.com/questions/13863979/jquery-add-class-to-parent-object |
||
pako Profil * |
#2 · Zasláno: 27. 12. 2013, 09:29:30
Skus pouzit metodu
parents a filtrovat podla triedy dir , pretoze podla dokumentacie je vo vybere closest aj element, na ktorom metodu volas.
|
||
Viktor 36 Profil |
Ach, ja dement :D Mne tam chýbalo niečo iné. Presunul som "});" nižšie a ide :D
Teraz som to dal takto a funguje to, ale mám problém ... keď je tam to .css tak to ide, ale akonáhle tam dám .addClass, tak mi to označí všetky položky Link v tom Menu 1 a Menu 1 nie, takže to robí presne opačne. $(document).ready(function(){ var str=location.href.toLowerCase(); $("#nav li a").each(function() { if (str.indexOf(this.href.toLowerCase()) > -1) { $("li.highlight").removeClass("highlight"); $(this).parent().addClass("highlight"); } }); // tu bolo }); $('ul.dropdown li').each(function(){ var $this = $(this); if($this.hasClass('highlight')){ $this.parents('li').css("color","blue"); } }); }); // dal som to sem |
||
pako Profil * |
#4 · Zasláno: 27. 12. 2013, 11:03:00
Sorry, poradil som ti blbost, pretoze som pozeral len na ten najvnutornejsi zoznam. Filtruj podla triedy
main a pouzi closest .
Skus closest('li.main') - takto by si mal ziskat odkaz na najblizsi element li s triedou main.
|
||
Viktor 36 Profil |
#5 · Zasláno: 27. 12. 2013, 12:27:21
pako:
V poriadku :) Mne to funguje tak, ako som to urobil ja, ale funguje to iba vtedy, keď tam dávam sám ten css štýl cez jquery. Keď tam chcem dať triedu cez .addClass(), tak mi to neurobí to, čo chcem... S tvojím riešením to tiež s .addClass() nerobí to, čo by malo. Funguje to aj s tým tvojím, ale vtedy to zvýrazňuje stále iba Main... To moje zvýrazní aj Link ak som v jeho Sublinku a to potrebujem. Vôbec nechápem, prečo to s jedným funguje a s druhým nie :D |
||
pako Profil * |
#6 · Zasláno: 27. 12. 2013, 12:46:48
Teoreticky mozu elementy dedit styly, ktore 'prebiju' styly triedy
highlight . Metoda css pridava inline styly, ktore maju najvacsiu prioritu.
|
||
Viktor 36 Profil |
To áno, ale keď tam dám
css , tak mi to pekne funguje. Keď tam dám addClass , tak to urobí to, že všetko okrem daných položiek zvýrazní ... Robí to presný opak toho, čo urobí css .
Tu sú obrázky ... css accClass (To tmavé je štýl pre zvýraznenie položky v hlavnom menu)
|
||
Časová prodleva: 10 let
|
0