jQuery の学習 Elements_jquery の表示効果を操作する 6 つの関数

复制代 代码如下:

<頭>





フィールドセット { width: 320px }



<フィールドセット>

折りたたみ可能なリスト — Take 1

• 項目 1


• 項目 2


• 
  項目 3
  
  
  
  • 項目 3.1
  
  
  • 
    項目 3.2
    
    
    
    • 項目 3.2.1
    
    
    • 項目 3.2.2
    
    
    • 項目 3.2.3
    
    
    
    
  
  
  • 項目 3.3
  
  
  
  
  • 
    項目 4
    
    
    
    • 項目 4.1
    
    
    • 
      項目 4.2
      
      
      
      • 項目 4.2.1
      
      
      • 項目 4.2.2
      
      
      
      
      
      
      • 項目 5
      
      
      
      
      
      

上の実現リストの変更はほぼ解決されていますが、jQuery には要素状態を切り替える関数 toggle() が提供されています。上の色の文字のコードは次のコードに変更されます。 ，同様に上記の機能を実現できます：
$(this).children().toggle();
$(this).css('list-style-image',
($(this).children().is(':hidden')) ?
'url(plus.gif) ' : 'url(minus.gif)');
}
上記の 3 つの関数数 show()、hide()、toggle() パラメータの状況下では、段階的に表示と隐藏が可能です。
hide(speed,callback)
show( Speed,callback)
toggle(speed,callback)
speed: 数字または文字列、ハンドル効果の持続時間 (選択可能) は秒数または指定された文字列のうちの 1 つを指定します: 遅い、通常
callback: 関数を返します (オプション)。アニメーションが完了したときに使用されます。

アニメーション効果の折り曲げ可能リスト

代打代打:

<頭>





フィールドセット { width: 320px }



<フィールドセット>

折りたたみ可能なリスト — テイク 3

• 項目 1


• 項目 2


• 
  項目 3
  
  
  
  • 項目 3.1
  
  
  • 
    項目 3.2
    
    
    
    • 項目 3.2.1
    
    
    • 項目 3.2.2
    
    
    • 項目 3.2.3
    
    
    
    
  
  
  • 項目 3.3
  
  
  
  
  • 
    項目 4
    
    
    
    • 項目 4.1
    
    
    • 
      項目 4.2
      
      
      
      • 項目 4.2.1
      
      
      • 項目 4.2.2
      
      
      
      
      
      
      • 項目 5