There is a valid menu:

<ul id="menu"> <li><a href="">Item 1</a> <ul><li>Item 1.1</li> <li>Item 1.2</li> <ul> </li> <li><a href="">Item 2</a> <ul><li>Item 2.1</li> <li>Item 2.2</li> <ul> </li> </ul>

How to make an appeal to the right LI correctly so that its submenu is activated? Provided that the call should work in the following function:

 $("menu").onmouseover = function() { //тут обработка нужного LI }

PS Not to be confused, the implementation is not on Jquery. PPS Juzat Jquery do not offer, there are requirements. Otherwise I would not steamed!

And along the way, the question is how this piece of code:

 .onmouseover = function() { }

do so

 .mouseover(function() { }

I know that mouseover will handle window.event but I can't add a handler.

For earlier thanks to all JS GURU :)

  • What is the challenge? Why broadcast mouseover on the menu, and why not on #menu li ...? - karbachinsky
  • Even though #menu li, I can’t select this item. Rather, I can choose but only Item 1, Item 2 does not respond. - Palmervan
  • You ul are not closed. - ling
  • ling yes then the little things, the code is typed in a hurry! - Palmervan

4 answers 4

 <ul id="menu"> <li><a href="">Item 1</a> <ul><li>Item 1.1</li> <li>Item 1.2</li> </ul> </li> <li><a href="">Item 2</a> <ul><li>Item 2.1</li> <li>Item 2.2</li> </ul> </li> </ul> <script> function ae(e,t,f){if(e.addEventListener){e.addEventListener(t,f,false);}else if(e.attachEvent){e.attachEvent('on'+t,function(){f.apply(e)});}else{e['on'+t]=f;}return e;} function hideUls(){ var u = document.getElementById('menu').getElementsByTagName('ul'), i = 0; while(u[i]){ u[i].style.display = 'none'; ++i; } } function showUl(event){ hideUls(); var e = event || window.event; var t = e.target || e.srcElement; if(t.nodeName.toLowerCase() == 'a'){ next(t).style.display = ''; } } function next(x){ do{ x = x.nextSibling; }while(x && x.nodeType == 3); return x; } var a = document.getElementById('menu').getElementsByTagName('a'), i = 0; while(a[i]){ ae(a[i], 'mouseover', showUl); ++i; } hideUls(); </script>

The ae function is taken from javascript.ru (originally addEvent), doped and minimized.

     $("menu li").onmouseover = function(e) { var li_element = e.target; }

    In general event.target will not work in IE, there is an attribute srcElement.

      I did not understand exactly what you want, but if you just get an element that you’ve missed, then he lives in the event.target, you just need to filter the unnecessary ...

       <html> <body> <ul id="menu" onmouseover="myFunc(event);"> <li><a href="">Item 1</a> <ul><li>Item 1.1</li> <li>Item 1.2</li> <ul> </li> <li><a href="">Item 2</a> <ul><li>Item 2.1</li> <li>Item 2.2</li> <ul> </li> </ul> <script language="javascript"> function myFunc(e) { if (e.target.tagName != "LI") return; alert(e.target.innerHTML); } // myFunc </script> </body> </html>

      It is only necessary to conclude the list in div so that it does not react to the entire width of the page.

         $(document).delegate('#menu', 'click', function (event) { var cLi = event.target }) В cLi тот li на который кликнули. кроссбраузерно