HTML コード: コードをコピー コードは次のとおりです: スタディワールド 1111111111 2222222222 333333333 4444444444 iv> JQuery コード: 最初の実装メソッド: コードをコピーコードは次のとおりです。 1. </div>$(function(){ <div class="codebody" id="code54221">$(".topicList h3") click(function(){ <br>var UL = $(this).next("ul"); <br>if(UL.css("display")=="none"){ <br>UL.css ("表示","ブロック"); <br>} <br>else{ <br>UL.css("表示"," なし") <br>} <br>}); ; <br> 2 番目の実装方法: コードをコピーします🎜> コードは次のとおりです: 2. $(function(){ </a>$(". topicList h3").toggle(function(){ </span>$(this).next("ul").hide(1000); </div>},function(){ <div class="codebody" id="code32195">$(this).next( "ul").show(1000); <BR>}) <BR><BR> <BR><BR> 3 番目の実装メソッド: <BR>Jquery が提供する表示と非表示を使用して、イージングで表示と非表示の効果を完成させることができます。この 2 つの方法は似ているため、直接切り替えを使用して完成させることができます。 <BR><BR><BR><BR></div>コードをコピーします<BR><STRONG></STRONG> コードは次のとおりです:<BR><BR> <div class="codetitle">3. /javascript" > <span>$(function(){ <a style="CURSOR: pointer" data="71715" class="copybut" id="copybut71715" onclick="doCopy('code71715')">$(".topicList h3").toggle(function(){ <u>$(this).next("ul").css("表示", "なし"); </u>},function(){ </a>$(this).next("ul").css("表示","ブロック"); </span>}); </u></a></span> </div>} ); <div class="codebody" id="code71715"> <br> <br><br>4 番目の実装メソッド: <br> <br>toggle パラメータが 2 つあり、両方とも関数である場合、 first をクリックして最初の機能を実行し、2 番目をクリックして 2 番目の機能を実行します。 <br><br><br><br><br>コードをコピーします</div> <br><strong> コードは次のとおりです:</strong><br> <br>4. /javascript" > <div class="codetitle">$(function(){ <span>$(".topicList h3").toggle(topicHandler,topicHandler); <a style="CURSOR: pointer" data="53153" class="copybut" id="copybut53153" onclick="doCopy('code53153')">function topicHandler(){ <u>//fadeIn を使用できます、show、slideDown 特定のコンテナの表示を完了します</u>//fadeOut、hide、slideUp を使用して、特定のコンテナの非表示を完了します</a>//したがって、2 つの間の回転は各トグルで完了できます</span> $(this) .next("ul").toggle(1000) </div>} <div class="codebody" id="code53153">});</div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
