如何将 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/