0

Есть допустим меню:

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

Как верно сделать обращение к нужному LI чтобы при этом было задействовано его подменю? При условии что обращение должно работать в слкдующей функции:

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

P.S. Чтобы не путали, реализация идет не на Jquery. P.P.S. Юзать Jquery не предлагайте, есть требования. Иначе я бы и не парился!

И попутно вопрос, как этот кусок кода:

.onmouseover = function() { }

сделать таким

.mouseover(function() { }

Знаю что mouseover будет обрабатывать window.event но сложить обработчик не могу.

За ранее благодарен всем JS ГУРУ :)

4
  • В чем заключается задача? зачем вещать mouseover на меню, а почему не на #menu li...? 28 сен 2011 в 11:33
  • Хоть даже #menu li, не могу выбрать этот элемент. Вернее выбрать могу но только Item 1, Item 2 не откликается.
    – Palmervan
    28 сен 2011 в 11:35
  • У вас ul не закрыты.
    – ling
    28 сен 2011 в 11:52
  • ling да то мелочи, код набирал спеша!
    – Palmervan
    28 сен 2011 в 11:55

4 ответа 4

2
<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>

Функция ae взята с javascript.ru (в оригинале - addEvent), допилена и минимизирована.

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

вообще event.target не будет работать в ИЕ, там есть атрибут srcElement.

2

Не понял точно чего вы хотите, но если просто заполучить элемент, на который наехали - то он в event.target живёт, надо только ненужное фильтровать...

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

Нужно только список будет ещё в div заключить чтобы по всей ширине страницы не реагировало.

0
$(document).delegate('#menu', 'click', function (event) {
    var cLi = event.target

})
В cLi тот li на который кликнули. кроссбраузерно

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.