Javascript 使用jquery更改图标

我正在尝试更改列表图标。单击列表图标后，列表将打开，图标应将图标更改为关闭图标。再次单击“关闭”，它应更改为列表图标

以下是我尝试过的代码： HTML:

Css:

---

你想要实现的目标并不难

我建议您使用div元素而不是image元素，并使用css属性

background image

来定义它

这使您能够使用两个独立的css类（具有不同的背景图像），一个用于打开的菜单，另一个用于关闭的菜单

此外，现在可以使用来避免由于未加载资源而导致的图像闪烁，并避免多个http请求

您的实现应该与此类似。只需将

背景色

替换为

背景图像

。如果部署应用程序，请记住，使用sprite技术可以避免图像闪烁

我想你应该搜索：

---

然后在CSS中定义一个带有打开和关闭背景图像的

open

类和一个

close

类，为什么不使用隐藏和显示功能？这是最简单的

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<div id="menuLayout">
    <a href="#menuLayout" id="openMenuLayout">
        <img class="list" src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' style='display:none;' />
        <img class="close" src="http://seotobiz.com/images/icon_close.png" /></a>
    <nav id="menuLayoutList">
      <ul>
        <li>
            <form id="search">
              <input type="search" placeholder="Search...">
            </form>
        </li>
        <li><a class="a" href="javascript:;" id="home">Home</a></li>
        <li><a class="a" href="javascript:;" id="aboutLayout">About Us</a></li>
        <li><a class="a" href="javascript:;" id="KeyLayout">Key Facts</a></li>
        <li><a class="a" href="javascript:;" id="teamLayout">Team</a></li>
        <li><a class="a" href="javascript:;" id="#">Register</a></li>
        <li><a class="a" href="javascript:;" id="contactLayout">Contact</a></li>
      </ul>
    </nav>
  </div>
<script type="text/javascript">
  $('.a').click(function(){
    if($(this).hasClass("v")){
        $('.list').hide();
        $('.close').show();
        $(this).toggleClass("v");
    }else{
        $('.list').show();
        $('.close').hide();
        $(this).toggleClass("v");
    }

 });

</script>

$（'.a'）。单击（函数（）{
if（$（this）.hasClass（“v”））{
$（'.list'）.hide（）；
$（'.close'）.show（）；
$（此）.toggleClass（“v”）；
}否则{
$（'.list'）.show（）；
$（'.close'）.hide（）；
$（此）.toggleClass（“v”）；
}
});

---

现在，您需要使用$（this.attr（“id”）；对于锚定

打开菜单图标类做什么？好吧，所有这些类都做了什么？这正是我们不应该不说的建议：“使用精灵技术”或至少“先预加载图标图像！”：）OP已经做得很好了，因为浏览器首先加载了两个图像。我知道，我还没有写完答案，仅预加载显示为“隐藏”的图像；）<代码>显示：隐藏在CSS中不存在。你可以编辑你的答案来添加更多的信息，这将是一个可怕的抱歉，显示：没有预加载图像。看起来我把两种不同的东西混在一起了。

$("#openMenuLayout").click(function(e){
      debugger;
            if ($('#menuLayout').hasClass('open-menu')){
          $('#menuLayout').removeClass('open-menu');
                $('#openMenuLayout').find('img').removeClass().addClass('opened_icon');

                $(this).css('display','block');
        } else {
          $('#menuLayout').addClass('open-menu');
                $('#openMenuLayout').find('img').removeClass().addClass('open-menu_icon');
                 $(this).css('display','block');
        }

        e.preventDefault();
 });

#menuLayout {
display: block;
position: fixed;
width: 280px;
height: 100%;
z-index: 99;
top: 0;
left: -280px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
transition: left 0.2s ease-in-out;
-ms-transition: left 0.2s ease-in-out;
-o-transition: left 0.2s ease-in-out;
-moz-transition: left 0.2s ease-in-out;
-webkit-transition: left 0.2s ease-in-out;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0px, 0px);
background-color: #b11c1c;
background-image: -moz-linear-gradient(center top , #b11c1c, #AD3335);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b11c1c), to(#AD3335));
background-image: -webkit-linear-gradient(top, #b11c1c, #6A0001);
background-image: -o-linear-gradient(top, #b11c1c, #6A0001);
background-image: linear-gradient(to bottom, #b11c1c, #6A0001);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffb11c1c', endColorstr='#ffAD3335', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

#openMenuLayout {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
width: 32px;
height: 32px;
font-size: 16px;
color: #FFF;
line-height: 32px;
text-align: left;
z-index: 999;
top: 20px;
right: -52px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

img {
max-width: 100%;
}

#menuLayout.open-menu {
left: 0;
}

#menuLayout.open-menu #openMenuLayout {
left: 20px;
right: auto;
}
nav#menuLayoutList {
position: relative;
margin: 70px 0;
}

nav#menuLayoutList ul {
position: relative;
margin: 0;
}

$("#openMenuLayout").click(function(e){
    $(this).toggleClass('close');
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<div id="menuLayout">
    <a href="#menuLayout" id="openMenuLayout">
        <img class="list" src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' style='display:none;' />
        <img class="close" src="http://seotobiz.com/images/icon_close.png" /></a>
    <nav id="menuLayoutList">
      <ul>
        <li>
            <form id="search">
              <input type="search" placeholder="Search...">
            </form>
        </li>
        <li><a class="a" href="javascript:;" id="home">Home</a></li>
        <li><a class="a" href="javascript:;" id="aboutLayout">About Us</a></li>
        <li><a class="a" href="javascript:;" id="KeyLayout">Key Facts</a></li>
        <li><a class="a" href="javascript:;" id="teamLayout">Team</a></li>
        <li><a class="a" href="javascript:;" id="#">Register</a></li>
        <li><a class="a" href="javascript:;" id="contactLayout">Contact</a></li>
      </ul>
    </nav>
  </div>
<script type="text/javascript">
  $('.a').click(function(){
    if($(this).hasClass("v")){
        $('.list').hide();
        $('.close').show();
        $(this).toggleClass("v");
    }else{
        $('.list').show();
        $('.close').hide();
        $(this).toggleClass("v");
    }

 });

</script>