使用jQuery单击时切换元素

Question

目前，我有一个汉堡菜单按钮： https : //jsfiddle.net/sqvwm1dh/

单击此按钮后，我想将其替换为图形。

如何使用当前代码实现此目标，是否要在jQuery中实现？

  $('header').prepend('<div id="menu-button"></div>'); $('#menu-button').on('click', function(){ var menuItems = $(".menu-primary-menu-container"); menuItems.toggle(); }); 

 header { background:red; height:100px; } #menu-button { position: relative; z-index: 10000; display: block; top: 30px; right:0; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 15px 0px 22px 20px; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: 1px; color: #ffffff; cursor: pointer; } /* line 500, sass/_layout.scss */ #menu-button:after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; right: 20px; top: 16px; } /* line 511, sass/_layout.scss */ #menu-button:before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; right: 20px; top: 26px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <header> <div class="menu-primary-menu-container"> test </div> </header> 

Answer 1

方法1（jQuery）

使用的jQuery方法hide(); 和show();

做这样的事情-

1. 编写要替换的图形的CSS和HTML。 同时设置display:none; 到图形的CSS。

2. 单击按钮后，隐藏按钮并显示图形。

   例如-

`

$("#menu-button").click(function(){
        $(this).hide();
        $("#graphic").show();};);

方法2（CSS伪类）

上面的代码非常好，但是它是一个干扰性的代码（如果禁用了javascript或无法加载脚本，则该代码会影响网站的功能）。

很多时候我们无法避免使用javascript，但是在这里我们可以为什么不尝试一下呢？

供参考-CSS伪类-活动

#graphic{ display:none; // add other required css for graphic such as property, height,etc}
#menu-button:active { 
#graphic{ display:block;

 } 
#menu-button{display:none;
 }
}

Answer 2

我认为这是一个不错的简单解决方案

 $('header').prepend('<div id="menu-button"></div>'); $('#menu-button').on('click', function(){ var menuItems = $(".menu-primary-menu-container"); var menubutton = $(this); if(menubutton.hasClass('active')) menubutton.removeClass('active'); else menubutton.addClass('active'); menuItems.toggle(); }); 

 header { background:red; height:100px; } #menu-button { position: relative; z-index: 10000; display: block; top: 30px; right:0; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 15px 0px 22px 20px; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: 1px; color: #ffffff; cursor: pointer; } #menu-button.active { /* add your graph here */ } /* line 500, sass/_layout.scss */ #menu-button:after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; right: 20px; top: 16px; } /* line 511, sass/_layout.scss */ #menu-button:before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; right: 20px; top: 26px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <header> <div class="menu-primary-menu-container"> test </div> </header>