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>

尝试这个，让我知道它是否有效......这不是一个非常好的，但可能是有用的

从悬停时打开的Wordpress更改菜单点击

1 个答案: