если навести курсор мыши на элемент div, отобразить меню - PullRequest
Новая
       43

если навести курсор мыши на элемент div, отобразить меню

2 голосов
/ 14 сентября 2011

У меня есть следующее меню, каскадное наведение при наведении, но мне нужно добавить несколько условных проверок, например, если курсор мыши наведет курсор на элемент div, тогда меню остается скользящим.

Также, если мышь находится на LI, проверьте меню вниз.

Как вы можете видеть, он просто скользит вниз и назад, когда вы покидаете "div".

Я застрял ... и пытался часами искать операторы if и т. Д., Я просто не могу получить правильный синтаксис.

мой пример

Ответы [ 4 ]

2 голосов
/ 14 сентября 2011

Здесь - это рабочий пример

HTML 

<div id="leftWrap">
    <div id='accordion'>
        <ul>
           <li><div>Absorption</div>
               <ul style="display: none;">
                   <li>Accessories</a>
                       <ul style="display: none;">
                           <li>AA500AFG</li>
                           <li>AA500F</li>
                           <li>AA500G</li>
                           <li>AA990F</li>
                       </ul>
                   </li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
           <li><div>Fluorescence</div>
               <ul style="display: none;">
                   <li>Accessories</li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
       </ul>
    </div>
</div>

Javascript / JQuery 

jQuery(document).ready(function() {
    $('#accordion ul > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });
});

Если вы спросите меня, это действительногрязный, когда вы используете mousehover / mouseenter для таких вещей.Я бы предпочел использовать событие щелчка после первого наведения или чего-то такого, чтобы пользователь не раздражался от всего этого движения. 

jQuery(document).ready(function() {
    $('#accordion ul:first-child > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });

    $('#accordion ul:not(:first-child) > li').click(function(){
        $(this).children("ul").slideToggle('slow');
    });
});
2 голосов
/ 14 сентября 2011

Сделайте его дочерним по отношению к <div>, тогда оно не отменяет событие, когда вы его покидаете.

Также следует отметить, что более семантическим является навигация из вложенных списков (например,как

  • Категория
    • Элемент
    • Элемент 
<ul>
    <li>Category 
        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </li>
</ul>
1 голос
/ 14 сентября 2011

http://jsfiddle.net/dttdB/13/

При наведении указателя мыши на элемент заголовка, когда мышь его покидает, эффект наведения теряется.

1 голос
/ 14 сентября 2011

Я пытался поиграть в вашу скрипку, но разметка и css сильно сбивают с толку.

Как сказал Рикудо , вы должны сделать div, его потомком, сделать это намного проще. Я создал самый простой аккордеонный скелет. Вы можете видеть это здесь .

Он делает все, что вы хотите. Однако для настройки и других вещей, я оставлю это на ваше усмотрение.

...