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

Change Icons on toggle in my navigation bar

本文关键字：图标 我的 导航      更新时间：2023-09-26

我正在尝试大约2个小时，现在得到的东西这么简单的完成，但似乎有一些阻碍我的功能工作的方式，我不明白是什么导致功能不工作，我怎么能让它显示点击图标的变化。

任何帮助都将非常感激，请参阅下面的链接，调整一下浏览器的大小，这样你就会看到菜单切换

我试图改变div类菜单关闭，而不是菜单切换点击，所以会有一个不同的图标。

这里是网站上的链接: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;
}

我打赌，当你第一次写这个

$( ".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-close。

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

$( "#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 })
})

如果我去你的网页，我看到错误"Uncaught ReferenceError: $ is not defined"。Jquery在脚本下面定义，所以$(function()…根本不执行

尝试使用addClass()和removeClass()。如果你想切换它，你可以使用If else语句。

$(document).ready(function(){
    $("button").click(function(){
        $('.blue').addClass('orange');
        $('.orange').removeClass('blue');
        $('div').animate({borderRadius: "100px"})
    });
});
.blue{
  height: 150px;
  width: 150px;
  border-radius: 5px;
  border: 1px solid black;
  background-color: royalblue;
  }
.orange{
  background-color: orange;
  height: 150px;
  width: 150px;
  border-radius: 5px;
  border: 1px solid black;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='blue'></div>
<button> Change Color</button>

相关文章：