Изменение значка с помощью 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> 

Jquery:

$("#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. Если вы развертываете приложение, помните, что вы можете избежать мерцания изображения с помощью техники спрайтов.

http://jsfiddle.net/V5vg9/

Answer 2

Я думаю, что вы ищете toggleClass:

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

затем определить в CSS в open класс и close класс с открытием и закрытием background-image.

Answer 3

Почему бы не использовать функции скрыть и показать? is ver most simple

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

Теперь вам нужно определить с помощью $ (this) .attr ("id"); для анкера