javascript - 在我的导航栏中更改切换图标

Question

我现在尝试了大约 2 个小时来完成如此简单的事情，但似乎有什么阻碍了我的功能正常工作，我不明白是什么导致该功能无法正常工作，我该如何做让它在点击时显示图标变化。

如有任何帮助，我们将不胜感激，请查看下面的链接，稍微调整一下浏览器的大小，以便您可以看到菜单切换。

我正在尝试将 div 类更改为 menu-close 而不是 menu-toggle on click，因此会有不同的图标。

这是在网站上看到它的链接: http://didyouknowfacts.org/animals/

这是我的 html + javascript:

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="col-width">

              <script>
              $(function() {
              $( "#openclose" ).click(function(){
                  $( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );
                  $( ".menu-close" ).switchClass( "menu-close", "menu-toggle", 1000 );
              });
              });
              </script>
            <div id="openclose" class="menu-toggle"><?php _e( 'Menu', 'theme-name' ); ?></div>
            <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'theme-name' ); ?></a>
            </div>

            <?php wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
        </div>
    </nav><!-- #site-navigation -->

这是CSS:

.menu-toggle {
  cursor: pointer;
  font-size: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 17px;
  right: 10px;
  text-align: center;
}

.menu-toggle:before {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font: normal 30px/1 FontAwesome;
  text-decoration: inherit;
  vertical-align: text-bottom;
  color: #fff;
  content: "\f0c9";
  margin: 0;
}

.menu-close {
  cursor: pointer;
  font-size: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 17px;
  right: 10px;
  text-align: center;
}

.menu-close:before {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font: normal 30px/1 FontAwesome;
  text-decoration: inherit;
  vertical-align: text-bottom;
  color: #fff;
  content: "\f00d";
  margin: 0;
}

Answer 1

我敢打赌，当你第一次写这篇文章时

$( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );

所有 .menu-toggle 对象“切换”为 menu-close 对象，这意味着您只有一堆 .menu-close dom 中的对象。当你稍后再写这个:

$( ".menu-close" ).switchClass( "menu-close", "menu-toggle", 1000 );

所有你的.menu-close对象变成了.menu-toggle，意思是所有你的对象现在是.menu-关闭。

因此，我们只需更改您的点击函数，以包含指向当前点击的菜单项的指针。

$( "#openclose" ).click(function(){ //If this is not a unique name then it should by the way be a class, not an id.
    $( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );
    $( this ).switchClass( "menu-close", "menu-toggle", 1000 })
})