Question

我试图修复一个WordPress儿童主题（来自Twentyseventeen）的移动菜单，该主题不再在菜单＆＃39;点击。基本上我不得不拆开标题以移动东西，现在咏叹调扩展菜单尚未被识别。相反，我试图使用javascript将ul的显示属性从无变化到阻止，但这也不起作用 - 主要是因为我不知道关于js的第一件事我和＃＆＃ 39;我只是尝试用点点滴滴做出一些东西。

该网站的演示现已发布在http://www.histeve.co.uk/testing/triangledrivertraining/

我尝试使用的javascript如下：

<script>
var element = document.getElementById("topMenu");
document.getElementById("navBtn").addEventListener("click", toggleNav);

function toggleNav() {
if( element.style.display == 'none' ) { 
function show() {('#topMenu').css ('display:block');}
} else {
function hide() {('#topMenu').css ('display:none'); }}
}
</script>

这不再是错误，但它根本没有做任何事情。

如果有人有任何想法，我们非常感谢您的帮助！

由于史蒂夫

Answer 1

你应该修复你的两个选择器，它应该以$开头（因为它是wordpress你可能需要使用jquery而不是$）以及你的css函数，如下所示。

<script>
var element = document.getElementById("topMenu");
document.getElementById("navBtn").addEventListener("click", toggleNav);

function toggleNav() {
if( element.style.display == 'none' ) { 
function show() {$('#topMenu').css ('display','block');}
} else {
function hide() {$('#topMenu').css ('display','none'); }}
}
</script>

替代

而不是使用CSS，你可以切换更容易的类

function toggleNav() {
  $('#topMenu').toggleClass('active');
}

然后在css

#topMenu{display: none;}

#topMenu.active{display: block;}

Answer 2

试试这个：

<script>
    var $topMenu = jQuery("#topMenu");
    jQuery("#navBtn").click(toggleNav);

    function toggleNav() {
        if($topMenu.is(":visible")) {
            $topMenu.hide();
        } else {
            $topMenu.show();
        }
    }
</script>

更新：

要始终在桌面上显示菜单，您应该使用此解决方案：

在页面中添加以下样式：

 <style>
    @media (max-width: 768px) {
        .menu-navigation-container {
            display: none;
        }
        .menu-navigation-container.show-on-mobile {
            display: block;
        }
    }
</style>

添加使用此JS：

<script>
    var $topMenu = jQuery(".menu-navigation-container");
    jQuery("#navBtn").click(function(){
        $topMenu.toggleClass("show-on-mobile");
    });
</script>

扩展菜单没有响应

2 个答案: