2

ボタンをクリックするとアコーディオンメニューを切り替える次のjQueryがあります。

jQuery:

$(function() {  
 $('#chooseOption').click(function(){
  $('#accordion ul').toggle();
 });    
});

それはうまくいきます！

さて、トグルのCSS heightとbackground要素の両方を変更できるかどうか疑問に思っていました. そのため、クリックすると、その要素のandchooseOptionが変更されます。heightbackground

デフォルトの CSS:

#chooseOption {height:35px;background-image:url('1.jpg');}

クリックすると、次のように変わります。 

#chooseOption {height:55px;background-image:url('2.jpg');}

これについてのポインタに感謝します。

4

4 に答える 4

6

そのためのクラスを作成し、クラスを切り替えます。

$(function() {  
 $('#chooseOption').click(function(){
  $('#accordion ul').toggleClass("itsclass");
 });    
});

CSS:

.itsclass {
  height:55px;
  background-image:url('2.jpg');
}
于 2012-12-21T12:17:18.573 に答える
1

回答:-D

$(function() {  
   $('#chooseOption').click(function(){
     $('#accordion ul').toggle();
     $('#chooseOption').toggleClass("chooseOptionNew");
   });    
});
于 2012-12-21T14:14:12.240 に答える
1

以下のようにcssクラスを定義します

.chooseOptionNew {height:55px;background-image:url('2.jpg');}

toggleClass() を使用します。このメソッドは特定のクラスを追加/削除します。

$(function() {  
 $('#chooseOption').click(function(){
  $('#accordion ul').toggle().toggleClass("chooseOptionNew");
 });    
});
于 2012-12-21T12:20:19.050 に答える
1

jQuerytoggleClass()関数を使用してメニューに CSS クラスを追加または削除することで、これを行うことができます。

説明: クラスの存在またはスイッチ引数の値に応じて、一致した要素のセット内の各要素から 1 つ以上のクラスを追加または削除します。

使用法：

$('#accordion ul').toggleClass('.cssclass');
于 2012-12-21T12:20:20.563 に答える