javascript - Wordpress 下划线，用 mouseup 切换类似乎不起作用

Question

我使用下划线作为网站的基本主题，并且我真的很喜欢它包含一个可行的移动导航元素作为主题的一部分。但这本质上是一个单页网站，并且当单击链接时导航不会“取消”切换...因为它不会离开页面。

所以我写了一个小脚本。

php 生成的 HTML 本质上是这样的(针对本文进行了简化):

<nav id="site-navigation" class="main-navigation toggled" role="navigation">
    <button class="menu-toggle" aria-controls="mobile-menu" aria-expanded="true"><i class="fa-bars fa"></i></button>
    <div class="menu-main-nav-container">
         <ul id="primary-menu" class="menu nav-menu" aria-expanded="true">
             <li class="menu-item"><a href="LINK">Link 1</a></li>
             <li class="menu-item"><a href="LINK#anchor-on-the-page">Link 2</a></li>
             <li class="menu-item"><a href="LINK#different-anchor-on-the-page">Link 3</a></li>
        </ul>
    </div>
</nav>

这是我编写的脚本:

<script type="text/javascript">
    $('.main-navigation.toggled li.menu-item a').mouseup(function(){
        $('.main-navigation.toggled').removeClass('toggled');
        $("button").attr("aria-expanded","false");
        $("#primary-menu").attr("aria-expanded","false");
    });
</script>

我确信我忽略了一些明显的东西，但我没有看到它。

Answer 1

您的整个页面设置如何？如果此 javascript 不是从页脚运行，您可能需要将 javascript 包装在 document.ready 中。当元素尚未呈现并且 mouseup 事件可能未附加时，它可能正在运行。

试试这个:

<script type="text/javascript">
    $('document').ready(function(){
    $('.main-navigation.toggled li.menu-item a').mouseup(function(){
        $('.main-navigation.toggled').removeClass('toggled');
        $("button").attr("aria-expanded","false");
        $("#primary-menu").attr("aria-expanded","false");
    });
    });
</script>

这是一个 fiddle 。 http://jsfiddle.net/zsecLnd6/

如果这不起作用，请尝试添加

alert('test');

在 mouseup 和文档就绪函数内查看其是否正在运行。