2012-03-29 8 views
0

折りたたみ可能なメニューの動的コードがあります。ダイナミックコードで折りたたみ可能なメニューイメージを変更するにはどうすればよいですか?

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

、ここで折りたたみ可能なメニューのためのjavascriptです:

$(function(){ 
    $('.swap-menu').bind('click',function(){   
     $('.sub-menu').find("+ ul").slideUp(1); 
     $(this).find("+ ul").slideToggle("fast"); 
    }); 

     $('.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); 
    }); 
}); 

答えて

0

使用addClassとremoveClass CSSクラスを切り替えて割り当てるために、私はそれがPHPの折り畳み式のメニューのメニュー 動的なコードを折りたたんだときの画像を変更したいですクラスとは異なる画像。あなたのコードで行わ チェックhere ...

$(function(){ 
    $('.swap-menu').bind('click',function(){   
     $('.sub-menu').find("+ ul").slideUp(1); 
     $(this).find("+ ul").slideToggle("fast"); 
     $('.swap-menu').toggleClass('current');// here you need to create one css class .current and put image you want to display or switch. Make sure you have alternate image for swap-menu which will switch with the current class 
    }); 

     $('.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); 
    }); 
});​ 
+0

私たちはどのように私はそれを行うことができ、それが唯一のクリック機能のために使われている、.swapメニューのCSSクラスを持っていませんか? – user1300103

+0

心配はいりません。 '.sap-menu' [check this](http://jsfiddle.net/R2wwL/1/)でクラスを作成することができます。あなたがする必要があるのは、画像がクローズ状態を '.swap-menu'クラスにセットし、オープン状態イメージを' .current'クラスにセットすることです。私は以前に使用していますが、.swap-menuの代わりに.swap-menuを直接使用することができます: –

+0

[チェックする](http://jsfiddle.net/R2wwL/3/)同じクラスの.swap-menuと.currentをバックグラウンドイメージとして直接割り当てることができる前に、使用する必要はありません。 –

関連する問題