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

$(this).toggleClass('active');

然后在CSS中为#menu-button添加.active类的样式，并设置背景图像。或者做点别的事。

单击菜单按钮更改为图形

1 个答案: