Question

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

点击后，我想用图片替换它。

如何使用当前代码实现此目的，我是否在jQuery中执行此操作？

＆＃13;

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

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

Answer 1

方法1（jQuery）

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

做这样的事情 -

编写要替换的图形的CSS和HTML。同时将display:none;设置为图形的CSS。
单击该按钮时，隐藏按钮并显示图形。

例如 -

`

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

方法2（CSS伪类）

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

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

供参考 - CSS pseudo class - active

#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

我认为这是一个很好的简单解决方案

＆＃13;

$('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();
    });

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

使用jQuery单击切换元素

2 个答案: