Jquery_jquery を使用して表示および非表示を切り替える 4 つの簡単な方法

HTML コード:

コードをコピー コードは次のとおりです:

スタディワールド

• 1111111111
2222222222

• 333333333
  
• 4444444444

iv>


JQuery コード:

最初の実装メソッド:

コードをコピーコードは次のとおりです。 1.

$(function(){

$(".topicList h3") click(function(){
var UL = $(this).next("ul");
if(UL.css("display")=="none"){
UL.css ("表示","ブロック");
}
else{
UL.css("表示"," なし")
}
}); ;




2 番目の実装方法:

コードをコピーします🎜>

コードは次のとおりです: 2. $(". topicList h3").toggle(function(){ $(this).next("ul").hide(1000);

},function(){

$(this).next( "ul").show(1000);
})



3 番目の実装メソッド:
Jquery が提供する表示と非表示を使用して、イージングで表示と非表示の効果を完成させることができます。この 2 つの方法は似ているため、直接切り替えを使用して完成させることができます。

コードをコピーします
コードは次のとおりです:

3. /javascript" > $(function(){ $(".topicList h3").toggle(function(){ $(this).next("ul").css("表示", "なし"); },function(){ $(this).next("ul").css("表示","ブロック"); });

} );

4 番目の実装メソッド:

toggle パラメータが 2 つあり、両方とも関数である場合、 first をクリックして最初の機能を実行し、2 番目をクリックして 2 番目の機能を実行します。




コードをコピーします

コードは次のとおりです:

4. /javascript" >

$(function(){ $(".topicList h3").toggle(topicHandler,topicHandler); function topicHandler(){ //fadeIn を使用できます、show、slideDown 特定のコンテナの表示を完了します//fadeOut、hide、slideUp を使用して、特定のコンテナの非表示を完了します//したがって、2 つの間の回転は各トグルで完了できます $(this) .next("ul").toggle(1000)

}

});