Как мне справиться с наведением в этом рекурсивном меню, используя jQuery? - PullRequest
Новая
       19

Как мне справиться с наведением в этом рекурсивном меню, используя jQuery?

0 голосов
/ 08 октября 2010

В моем меню ниже, у меня есть это в моем CSS: 

ul li ul {display:none;}

Когда выбран элемент меню, я использую этот jQuery, чтобы показать дочернее меню: 

$('ul li.selected ul').show();

Поэтому я запутался в том, как обрабатывать парения для меню верхнего уровня. При наведении курсора на элемент меню верхнего уровня, как скрыть все подменю и показать только скрытые элементы. Но при наведении курсора мне нужно снова показать li.select, как он был изначально. Как мне это сделать? 

<div class="menu">
<ul>
    <li class="administration first selected">
        <a href="/administration.aspx"><span>Administration</span></a>
        <ul>
            <li class="users first"><a href="/administration/users.aspx"><span>Users</span></a></li>
            <li class="forms last"><a href="/administration/forms.aspx"><span>Forms</span></a></li>
        </ul>
        <div style="clear: both;"></div>
    </li>
    <li class="analytics"><a href="/analytics.aspx"><span>Analytics</span></a></li>
    <li class="options"><a href="/options.aspx"><span>Options</span></a></li>
    <li class="system last"><a href="/system.aspx"><span>System</span></a></li>
</ul>
</div>

Ответы [ 3 ]

0 голосов
/ 08 октября 2010

Check hover function. 

   $('ul > li').hover(function() {
       // executed when mouse visits 'li'
       // hide all submenus except children of 'this' object
   }, function() {
       // executed when mouse leaves 'li'
       // hide all submenus except 'selected' ones
   });
0 голосов
/ 08 октября 2010

Чтобы добавить к тому, что сказал Никита, должно работать что-то вроде ниже 

$('div.menu ul > li').hover(function() {
     $(this).children('ul:first').show().end().siblings().children('ul:first').hide();
}, function() {
     $(this).children('ul:first').hide().end().siblings().children('ul:first').css('display','');
});

В противном случае создайте другой класс, возможно, «скрытый» класс с отображением: нет; на нем, и просто добавьте этот класс к братьям и сестрам и удалите при наведении.

0 голосов
/ 08 октября 2010

Это должно быть просто $('ul li.selected:hover ul').show();. Если нет, то объясните более подробно, что именно вы хотите.

Другой способ - использовать: 

$('ul li.selected').hover(
    function() {
        $(this).find("ul").show();
    },
    function() {
        $(this).find("ul").hide();
    }
);

См. http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/ для хорошего примера. Если приведенный выше код не работает, воспользуйтесь приведенной выше страницей - у нее есть хороший рабочий пример использования .hover().

Существует также множество действительно крутых эффектов, которые вы можете получить для шоу и скрытия, таких как исчезновение, слепота и многие другие. Посмотрите на jQuery UI.

...