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