Javascript 更改菜单图像

单击菜单按钮后，我需要更改其背景图像，但是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>

JS

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

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

---

为什么不为类中的每个对象设置背景图像，然后切换呢

.pre_click { 
     background-image:url(".../image_1.png");
 }
.post_click { 
     background-image:url(".../image_2.png");
 }

然后切换

 $('.menu').on('click', function() { 
    $('.menu').toggleClass('pre_click post_click')
}) 

---

确保设置了要应用于“菜单”项的默认类，以使其正确切换

使用jquery更改单击时的按钮背景图像- 检查代码段

$（文档）.ready（函数（）{
$（“.menu触发器”）。单击（函数（）{
$（“.menu trigger”）.toggleClass（“打开”）
})
})

。菜单触发器{
背景图像：url（“http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/usb-icon.png");
背景位置：中心；
背景大小：100%100%；
背景重复：无重复；
宽度：50px；
高度：50px；
左：0%；
变换：旋转（-135度）；
位置：相对位置；
光标：指针
}
.打开{
背景图像：url（“http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/help-desk-icon.png");
}

通常这不会有问题，因为您的菜单是动态的（从数据库中提取，或通过阵列服务器端创建），您可以根据url栏中显示的内容或类似内容将类附加到“活动”菜单项。当然，您仍然可以将URL与菜单进行比较，如果它们匹配（或匹配数组中的设置或类似设置），则可以添加一个类到其中，并与背景进行比较。@junkfoodjunkie我如何才能做到这一点？你觉得你能举个例子吗？呃。。。不，我不知道你用的是什么样的服务器端语言，如果有的话，不，我不会为你写一个完整的菜单系统。但是你可以在网上找到大量的PHP示例，无论是在这里还是通过Google（我只是假设你使用的是PHP，如果你使用的是其他东西，就用你现有的任何服务器端语言替换PHP）。您甚至可以使用javascript/jQuery来实现这一点—搜索“使用jQuery显示活动菜单项”-它应该会给出一些点击率。对于其他任何寻找此解决方案的人，您必须为这两个CSS类将JS代码放在上面两次