javascript - 展开菜单无响应

Question

我正在尝试修复 WordPress 子主题(来自 Twentyseventeen)中的移动菜单，该菜单在单击“菜单”时不再展开。基本上，我必须将标题撕开才能移动内容，现在 aria 扩展菜单无法识别。相反，我尝试使用 javascript 将 ul 的显示属性从无更改为阻止，但这也不起作用 - 主要是因为我不知道关于 js 的第一件事，并且我只是尝试从代码片段。

该网站的演示已上线 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

试试这个:

<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>