Autor Zpráva
SwimX
Profil
Dobrý den,

pomocí JS zobrazuji podkategorie + měním pozadí odkazu (kategorie)
při druhém kliknutí vracím vše JS zpět.
Hover efekt který mám definovaný v CSS ale potom nefuguje resp. nemění pozadí odkazu, kterému ho přiřadil JS.
Předpokládám, že to je standardní jev, ale co s tím? nechce se mi hover dělat přes JS.

ukázka:
<script>
  function Open(odkaz, id_pod){
    if(){
      odkaz.style.background = 'url(img/neco.jpg)';
      document.getElementById(id_pod).style.display = 'block';
    }
    else{
      ...
    }
  }
</script>

<ul>
  <li><a href='#' onclick='Open(this, "podkat1")'>Kategorie</a>
    <ul id='podkat1'>
      <li>Podkat 1
     </ul>
</ul>
Str4wberry
Profil
Prosím o odkaz na živou ukázku.
Chamurappi
Profil
Reaguji na SwimXe:
Je to standardní jev, protože pomocí odkaz.style.background nastavuješ background v atributu style a ten má pak větší váhu než vše ve stylopisu.

ale co s tím?
Neměň odkaz.style.background, měň odkaz.className, tedy třídu — a o pozadí se postarej ve stylopisu. Jakmile si pak uvědomíš, jak mocný nástroj jsou skriptem řízené třídy, můžeš svůj JS zjednodušit do podoby, kdy budeš v onclicku volat jen „Open(this)“ a ve skriptu změníš jen odkaz.parentNode.className (tedy třídu obalujícího <li>) — a o to, co a jak má být vidět, se už může postarat stylopis.
SwimX
Profil
Chamurappi:
perfektní, děkuji za rady. JS používám jen okrajově, mnohokrát děkuji :)
SwimX
Profil
Tak jsem to upravil a teď jedna technická:
HTML
<ul id='mainmenu'>
  <li><a href='#' class='menu' onclick="OpenCat(this); return false;">Kategorie 1</a>
    <ul class='podkat_close'>
      <li><a href='#'>Podkat 1</a>
      <li><a href='#'>Podkat 2</a>
      <li><a href='#'>Podkat 3</a>
      <li><a href='#'>Podkat 4</a>
    </ul>
    ...
</ul>

JS:
function OpenCat(odkaz){
	if(odkaz.className == 'menu'){
		odkaz.className = 'menuOpen';
		odkaz.parentNode.getElementsByTagName('ul')[0].className = 'podkat_open';
	}
	else{
		odkaz.className = 'menu';
		odkaz.parentNode.getElementsByTagName('ul')[0].className = 'podkat_close';
	}         
}


nebylo by snazší (výkonostně) přidat vnitřnímu <ul> (podkategorii) id, a volat OpenCat(odkaz, id) a zaměřovat getElementById? Není mé nové řešení horší než lepší?
Chamurappi
Profil
Reaguji na SwimXe:
Proč dáváš třídu k <ul>? Proč ji nedáš rodičovskému <li> a neskrýváš <ul> selektorem „.podkat_close ul“? Stačí ti všehovšudy jedna změna třídy — měníš jeden stav, nepotřebuješ měnit dvě třídy.
SwimX
Profil
Chamurappi:
hm, příště se zkusim i zamyslet

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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