jQuery - rozbalovacie menu

SP!DER · Napísal **SP!DER**: 07.11.2010 18:38

Zdravim

Potrebujem spravit rozbalovacie menu pomocou jQuery.

HTML:

Kód:

<ul>
     <li><a href="#">Menu 1</a>
          <ul>
               <li>Polozka 1</li>
               <li>Polozka 2</li>
               <li>Polozka 3</li>
          </ul>
     </li>
</ul>

Chcem aby bol zobrazeny iba link Menu 1. Ked nan kliken tak sa zobrazi aj polozka 1, 2, 3.

Dokazem to spravit s pouzitim identifikatorov, teda...

Kód:

<ul>
     <li><a href="#" id="menu1">Menu 1</a>
          <ul id="submenu">
               <li>Polozka 1</li>
               <li>Polozka 2</li>
               <li>Polozka 3</li>
          </ul>
     </li>

A jQuery...

Kód:

$('#menu1').click(function(){
     $('#submenu').show();
})

Ale tak to nechcem. Chcem to spravit cisto pomocou nejakych selektorov v jQuery. Cize nejak takto. Ak si klikol na ten a ten li,,, tak sa ti zobrazi ul ktory je vnoreny v klinutom li.
Snad chapete co chces

Viete mi poradit ?

emer · Napísal **emer**: 07.11.2010 18:49

Kód:

$('ul > li > a').click(function(){
  $(this).next().show();
});

?

SP!DER · Napísal autor témy **SP!DER**: 08.11.2010 16:59

Diki emer mas to u mna

Nakoniec som to spravil takto

Kód:

$('#menu_drop_1 > ul > li').click(function(){
      
      $(this).children('ul').toggle();
      
   });

// pridané po 21 hodinách 57 minútach od posledného príspevku

Mam ďalší problém s jQuery.

Potrebujem spraviť to aby sa nejaka funkcia resp. blok kodu vykonal len v tom pripade, že nejaky cas ukazujem kurzorom na nejaky div. Teda mam napr. div #miesto. Ak na tento div ukazujem 500 milisekund tak sa mi zobrazi aj div #nieco. Skusal som to spravit ale podarilo sa mi to len tak, ze stacilo ukazovat na #miesto napr. 20 minisekund a po 480 ,milisekundach sa zobrazilo #nieco. Ja chcem aby sa #nieco zobrazilo len v pripade ze na #miesto ukazujem tych 500 milisekund.

Snad ma chapete.

Vopred diki za rady

Ďuri · Napísal **Ďuri**: 08.11.2010 17:18

Zadefinujes si globalnu premennu, nazvime ju timeoutzobrazenia. Na element #miesto naviazes udalost mouseenter(), ktora spusti timeout a jeho ID vlozi do nasej premennej:

Kód:

timeoutzobrazenia = setTimeout(function(){ ... }, 500);

Dalej naviazes na tento isty element udalost mouseleave(), ktora tento timeout odstrani:

Kód:

clearTimeout(timeoutzobrazenia)

To je cele. Funguje to velmi jednoducho - po vojdeni mysi na element sa spusti timeout, ktory za isty cas (500ms) pozadovany objekt zobrazi; tento timeout mozno zrusit a tak zabranit zobrazeniu #niecoho odidenim mysi z elementu (mouseleave). Malo by to tak fungovat, neskusal som.

SP!DER · Napísal autor témy **SP!DER**: 08.11.2010 17:25

Diki duri toto funguje ale ja som mal na mysli cislo jQuery riesenie, nejako s pouzitim .delay() alebo podobne.Nevies ako by sa to dalo spravit ?

Ďuri · Napísal **Ďuri**: 08.11.2010 18:04

Ak sa pytas mna, tak ja neviem. V dokumentacii k delay() som sa docital len tolko, ze nie je nahrada k setTimeout. Aky prinos bude mat, ked miesto nativnych funkcii zavolas akusi funkciu $, ktora vyriesi xy inych, irelevantnych pripadov a nakoniec spravi presne to iste, co som napisal ja? Budes spokojnejsi, ked ti napisem funkciu $.urobfintu(), ktora bude v tele obsahovat to iste, ale na zaciatku bude mat magicky dolarik?

SP!DER · Napísal autor témy **SP!DER**: 08.11.2010 18:16

Myslel som nejaku inu funkciu ktora uz je v jQuery zabudovana. Ale ked nevies tak nevadi. Ani ja som nic v dokumentacii nenasiel preto sa pytam. Ale pre zaujimavost. Ako spravis tu funkciu s $ na zaciatku?

Ďuri · Napísal **Ďuri**: 08.11.2010 18:39

Tak pre zaujimavost. $ je Javascriptova fcia, a kazda fcia je v JS zaroven objektom. Preto je mozne vytvarat jej vlastne atributy ci metody.

Kód:

$.urobfintu = function()
{
   //cokolvek
};

Jednoduche by malo byt rozsirenie aj prototypu objektov, ktore vracia fcia $, teda by sa dalo pouzit napriklad $('#cokolada').zjedz(), ale neskumal som, ako presne sa to robi, jQuery nepoznam.

SP!DER · Napísal autor témy **SP!DER**: 08.11.2010 18:47

Diki za rady. Vidim ze JS je viac ojbektovo orientovany jazyk ako som si myslel. Vedel som ze je OOP ale nie ze ponuka az taketo moznosti.

jQuery - rozbalovacie menu

Podobné témy