В раскрывающемся меню jQuery отображаются все меню ul.sub-menu при наведении ul.menu - PullRequest
Новая
       22

В раскрывающемся меню jQuery отображаются все меню ul.sub-menu при наведении ul.menu

0 голосов
/ 07 сентября 2011

Я нашел это раскрывающееся меню jQuery на веб-страницах, и проблема, с которой я столкнулся, заключается в том, что при наведении курсора на элемент ul.menu показываются все последующие меню ul.sub, а не только те,ул.меню.Когда вы наводите курсор мыши на этот элемент ul.sub-menu, его ul.sub-menu складывается вверх и вниз нормально.Вот мой код: 

$(function() {

            $("#nav-primary ul.menu ul").css({ display: 'none' });
            $("#nav-primary ul.menu li").hover(function() {
                $(this).find('a').next('ul.sub-menu')
                    .stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 200 );
            }, function(){
                $(this).find('a').next('ul.sub-menu')
                    .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 200 );
            });

        });

1 Ответ

0 голосов
/ 04 августа 2013

Вы можете попробовать это: 

$j.fn.setNav = function(){
$j('#main-menu li ul').css({display: 'none'});

$j('#main-menu li').each(function()
{   
    var $jsublist = $j(this).find('ul:first');

    $j(this).hover(function()
    {   
        $jsublist.css({opacity: 1});

        $jsublist.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeIn(200, function()
        {
            $j(this).css({overflow:'visible', height:'auto', display: 'block'});
        }); 
    },
    function()
    {   
        $jsublist.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeOut(200, function()
        {
            $j(this).css({overflow:'hidden', display:'none'});
        }); 
    }); 

});

$j('#main-menu li').each(function()
{

    $j(this).hover(function()
    {   
        $j(this).find('a:first').addClass('hover');
    },
    function()
    {   
        $j(this).find('a:first').removeClass('hover');
    }); 

});

// Populate dropdown with menu items
$j("#nav-primary li").each(function() {
 var current_item = $j(this).hasClass('current-menu-item'); 
 var el = $j(this).children('a');
 var menu_text = el.text();

 if($j(this).parent('ul.sub-menu').length > 0)
 {
    menu_text = "- "+menu_text;
 }

 if($j(this).parent('ul.sub-menu').parent('li').parent('ul.sub-menu').length > 0)
 {
    menu_text = el.text();
    menu_text = "- - "+menu_text;
 }

 if(current_item)
 {
    $j("<option />", {
         "selected": "selected",
         "value"   : el.attr("href"),
         "text"    : menu_text
     }).appendTo("#nav-primary select");
 }
 else
 {
    $j("<option />", {
        "value"   : el.attr("href"),
        "text"    : menu_text
    }).appendTo("#nav-primary select");
 }
});

});
...