javascript - 使用jquery更改图标

Question

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

这是我试过的代码:HTML:

<div id="menuLayout">
    <a href="#menuLayout" id="openMenuLayout">
        <img src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' />
        <img src="http://seotobiz.com/images/icon_close.png" style='display:none;'/></a>
    <nav id="menuLayoutList">
      <ul>
        <li>
            <form id="search">
              <input type="search" placeholder="Search...">
            </form>
        </li>
        <li><a href="#homeLayout">Home</a></li>
        <li><a href="#aboutLayout">About Us</a></li>
        <li><a href="#KeyLayout">Key Facts</a></li>
        <li><a href="#teamLayout">Team</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#contactLayout">Contact</a></li>
      </ul>
    </nav>
  </div>

J查询:

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

CSS:

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

New Link

Answer 1

你想要达到的目标并不难。

我建议你使用 div 元素而不是图像元素，并使用 css 属性 background-image 来定义它。

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

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

您的实现应该与此类似。只需将 background-color 替换为 background-image。如果您部署应用程序，请记住您可以使用 sprite 技术避免图像闪烁。

http://jsfiddle.net/V5vg9/