javascript - Wordpress 将菜单从悬停时打开更改为单击

Question

我有一个网站 http://themerkle.com我一直在尝试将左上角的汉堡包菜单从悬停时打开更改为有人单击时打开。原因是，在智能手机上菜单保持打开状态，因为悬停不支持触摸屏设备。

我尝试寻找启用悬停的 css 部分，但即使在禁用了顶部菜单的大部分 css 行之后也是如此

#top-menu-selector:hover{color:#BD2A33;-moz-box-shadow: inset 0 0 20px 0 rgba(0,0,0,0.12);-webkit-box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 12);box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.12);}
    #top-menu ul li:hover ul, 
    #top-menu ul li:hover ul li a, 

鼠标悬停时菜单仍显示为打开。我也尝试禁用 javascript，但菜单仍然打开。我将其缩小为以下函数，它实际上在 sticky.php 中创建了菜单:

<?php //title attribute gets in the way - remove it
$menu = wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' => false, 'fallback_cb' => 'fallback_pages', 'echo' => false ) );
$menu = preg_replace('/title=\"(.*?)\"/','',$menu);
echo $menu;
?>

我不确定在哪里可以更改 css 或将所需的 js 添加到菜单以在鼠标单击时打开，感谢任何帮助。

更新:

经过进一步调查，我发现通过删除下面的元素，菜单在悬停时停止扩展。

<ul class="sf-js-enabled sf-shadow">

现在我需要弄清楚如何启用点击扩展。

更新 2:

通过在顶部菜单中添加一个 onclick 函数来修复:

<div id="top-menu" onclick="show_hide_menu();">  

然后添加以下脚本:

<script type="text/javascript">
var clicked = false;
function show_hide_menu()
{
    if(clicked == false){
        document.getElementById("menu-main").style.display = "none";
        clicked = true;
    }else if (clicked == true){
        document.getElementById("menu-main").style.display = "block";
        clicked = false;
    }
}
</script>

该解决方案不需要扰乱悬停实现，只需添加一个选项即可在您单击时关闭菜单。它似乎也覆盖了很好的悬停事件。

Answer 1

<script>
$('#top-menu .menu-item-has-children > a').removeAttr('href');
$('#top-menu .menu-item-has-children').click(function(){
    $(this).children('ul').css({'display':'block','visibility':'visible'});
});
</script>

试一试，让我知道它是否有效...这不是一个很好的方法，但可能有用