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/