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 *
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 *
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
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 *
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)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0