javascript - 更改菜单图像

Question

单击菜单按钮后，我需要更改它的背景图像，但 CSS :active 属性对其不起作用，仅在单击它时，我需要它保持为图像，直到它们再次点击它。

HTML

<nav class="clearfix">
   <div class="menu">
      <ul style="list-style-type:none;">
         <li>
             <a href="home.html">Home</a>
          </li>
          <li>
             <a href="about.html">About</a>
          </li>
          <li>
             <a href="slide.html">Before/After</a>
          </li>
          <li>
             <a href="fac.html">Facilities</a>
          </li>
          <li>
             <a href="contact.html">Contact</a>
          </li>
          <li>
             <a href="staff.html">Staff</a>
          </li>
      </ul>
   </div>
   <div class="site-wrapper">
      <div class="header">
          <a><div class="menu-trigger" title="Menu"></div></a>
      </div>
   </div>
   <script src="testing.js" type="text/javascript">
   </script>
</nav>

CSS

.menu-trigger {
    background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/usb-icon.png");
    background-position:center;
    background-size:100% 100%;
    background-repeat: no-repeat;
    width:50px;
    height:50px;
    left: -150%;
    transform:rotate(-135deg);
    position:relative;
}

.menu-trigger:hover{
    cursor: pointer;
}

JS

$('a .menu-trigger').on('click', function() {
    $('.menu').toggleClass('open', 300, 'easeOutQuad');
});

Answer 1

使用 jquery- 在点击时更改按钮背景图片- 检查片段

$(document).ready(function() {

  $(".menu-trigger").click(function() {
        
     $(".menu-trigger").toggleClass("open")

  })

})

.menu-trigger {
    background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/usb-icon.png");
    background-position:center;
    background-size:100% 100%;
    background-repeat: no-repeat;
    width:50px;
    height:50px;
    left:0%;
    transform:rotate(-135deg);
    position:relative;
    cursor:pointer
}

.open{
  background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/help-desk-icon.png");
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="site-wrapper">
      <div class="header">
          <a><div class="menu-trigger" title="Menu"></div></a>
      </div>
   </div>