Wie das Bild des zusammenklappbaren Menüs ändern

Question

ich brauche das Ausklappmenü Bild von zusammengeklappten Zustand zu ausgedehnten Zustand Code zu ändern:

<ul id="VerColMenu"> 
       <?php 

       $u = 0;     
       $groupStarted = 0; 
       foreach($BUTTON as $B){ 
        $level= $B->getAttribute('LEVEL'); 
        $levelAction= $B->getAttribute('ACTION'); 

        if ($level=="Group") { 
         if($groupStarted ==1){ 
          echo '</ul>'; 
          echo '</li>'; 
          $groupStarted =0; 
         } 
         if($levelAction=="Expand"){ 
          echo '<li>'; 
          echo '<a href="#" class="swap-menu active"><img id="menu_image" src="images/collapsed.gif" hspace = "2"/>'.$B->getAttribute('TITLE').'</a>'; 
          echo '<ul style="display:none;" class="sub-menu">'; 
          $groupStarted =1; 
         } 

        } 
        if ($level=="Item" || $groupStarted==0) { 

         echo '<li>'; 
         echo '<a href="#" class="direct-link">'.$B->getAttribute('TITLE').'</a>'; 
         echo '<input type="hidden" name="menu-id" value="'.$u.'"/>'; 
         echo '<input type="hidden" name="slider" value="'.$B->getAttribute('SLIDER').'"/>'; 
         echo '<input type="hidden" name="min" value="'.$B->getAttribute('MIN').'"/>'; 
         echo '<input type="hidden" name="max" value="'.$B->getAttribute('MAX').'"/>'; 
         echo '</li>'; 
         $u++; 
        } 
       } 

      ?>   

     </ul> 

js:

$(function(){ 

     $('.swap-menu').bind('click',function(event){ 

      $('.sub-menu').find("+ ul").slideUp(1); 
      $(this).find("+ ul").slideToggle("fast"); 
      document.getElementById('menu_image').setAttribute("src","images/expanded.gif") 
      //var verify = document.getElementById('menu_image').value; 
      // alert(verify);  
     /* if ($(this).hasClass("active")) { 
       $('.swap-menu').removeClass("active"); 
       $(this).addClass("active"); 
       $(this).find("img").attr('src','images/collapsed.gif'); 
      } */ 

     /* $('.sub-menu').find("+ ul").slideUp(1); 
      $(this).find("+ ul").slideToggle("fast"); 
      $(this).find("img").attr('src','images/expanded.gif'); */ 

     }); 


    $('.direct-link').bind('click',function(){ 
     if(!$(this).parents('.sub-menu').length){ 
      $('.sub-menu').hide(); 

     }    
     var $current=$(this).parent(); 
     var id=parseInt($current.find('input:hidden[name=menu-id]').val()); 
     var slider=$current.find('input:hidden[name=slider]').val(); 
     var min=parseInt($current.find('input:hidden[name=min]').val()); 
     var max=parseInt($current.find('input:hidden[name=max]').val());    
     button_clk(id, slider, min, max); 
    }); 
}); 

Dies ist der Teil, den wir brauchen zu tun: kollabierten Zustand die Bild-ID finden() Bild hinzufügen()

Komprimiert → Expanded S tate Suche für Image-Tag-ID() das Bild Ersetzen von Komprimiert auf Expanded()

gedehnten Zustand → Staat Komprimierte Image-Tag-ID das Bild ersetzen Finden von Komprimiert auf Expanded

Answer 1

Verwenden $("#menu_image").attr('src','image.gif'); http://jsfiddle.net/Kz6uV/2/