如何将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，从那里。应该停止悬停效果。

，以确保您打开点击使用jQuery子菜单，这是一个类似的例子

http://jsfiddle.net/geYZf/