Как изменить раскрывающееся меню WP от наведения до щелчка

Question

У меня есть тема WP, в которой есть меню сбоку (вертикально) и скрыто. Когда вы переместите мышь, меню выйдет, чтобы отобразить пункты меню. Когда вы переместите мышь в меню и наведите курсор, подменю сдвинется вниз.

Работает прекрасно, пока у меня слишком много подстраниц. Поэтому я хочу изменить состояние подменю от наведения до щелчка.

Мой текущий сценарий таков:

$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'); 
    }); 

}); 

$j('#menu_wrapper .nav ul li ul').css({display: 'none'}); 

$j('#menu_wrapper .nav ul 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('#menu_wrapper .nav ul li').each(function() 
{ 

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

}); 
} 

И потом:

// Create the dropdown base 
$j("<select />").appendTo("#menu_border_wrapper"); 

// Create default option "Go to..." 
$j("<option />", { 
    "selected": "selected", 
    "value" : "", 
    "text" : "- Main Menu -" 
}).appendTo("#menu_border_wrapper select"); 

// Populate dropdown with menu items 
$j(".nav 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("#menu_border_wrapper select"); 
} 
else 
{ 
    $j("<option />", { 
     "value" : el.attr("href"), 
     "text" : menu_text 
    }).appendTo("#menu_border_wrapper select"); 
} 
}); 

$j("#menu_border_wrapper select").change(function() { 
    window.location = $j(this).find("option:selected").val(); 
}); 

Если вы хотели бы видеть на сайте, это в bsbharco.com

Спасибо заранее.

Answer 1

.nav li.current-menu-item > a, .nav li > a:hover, .nav li > a.hover, .nav li > a:active, .nav li.current-menu-parent > a, .nav li.current-menu-item ul li a:hover, .nav li ul li a:hover, .nav li ul li:hover a, .nav li ul li.current-menu-item a { color: #ffffff; } 

просто удалить код или :hover, от there.That должны остановить эффекты при наведении курсора мыши.

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

http://jsfiddle.net/geYZf/