Wordpress 下划线，用 mouseup 切换 class 似乎不起作用

Question

我使用下划线作为网站的基本主题，我真的很喜欢它包含一个可行的移动导航元素作为主题的一部分。但这本质上是一个单页站点，当单击 link 时，导航不会 "de"-切换...因为它没有离开页面。

所以我写了一个小脚本。

php-generated-HTML 本质上是这样的（对此 post 进行了简化）：

<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 事件可能未附加时，可能是运行ning。

试试这个：

<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 和 document ready 函数中查看它是否运行。

Answer 2

好的。原来是这样，我不知道为什么，但是当我删除 '.main-navigation.toggled' 时它起作用了。对我来说没有意义，因为那些类肯定存在，但我也不在乎......因为它有效。 :)

谢谢大家的帮助！

Wordpress 下划线，用 mouseup 切换 class 似乎不起作用

Wordpress Underscores, toggling class with mouseup doesn't seem to work

javascript

php

jquery

wordpress

underscores-wp