jqueryトグルではコードは動作しますが、toggleClassでは動作しません

-1

私はウェブ全体を見て、toggleClassチュートリアルを実行して動作させています。しかし、下記の作業トグル方法をアップグレードする私自身の努力の中で、私は苦労しています。 toggleClassメソッドは一度開かれますが、CSSマークアップのスタイルは設定されず、閉じられません。トグルメソッドは正常に動作します。 toggleClassでCSSマークアップが選択されなかった理由を理解できません。これは私が比較のためにコメントアウトしているので、役に立つBoffinが私を導くことができます。私は本当に助けが必要です。 - Tx。ゴードン・エデイ。
jqueryトグルではコードは動作しますが、toggleClassでは動作しません

  <head> 



      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

      <script> 
      $(document).ready(function(){ 
       $("summary.detailsSUMMARY").click(function(e){ 

          var toggleDETAILS = $(this).next("section.detailsSECTION"); 
            toggleDETAILS.toggle(); 
                   }) 
            .css("cursor", "pointer"); 
            }); 
      </script> 

      <!-- 
      <script> 
      $(document).ready(function(){ 
       $("summary.detailsSUMMARY").click(function(e){ 
           var toggleDETAILS = $(this).next("section.detailsSECTION"); 
            toggleDETAILS.toggleClass("detailsSECTION"); 
                   }) 
            .css("cursor", "pointer"); 


            }); 

      </script> 
      --> 


      <style> 
      .detailsSECTION{ 
       display:none; 
       font-size:200%; 
       color:red; 
      } 
      </style> 

     </head> 

     <body> 



      <details id="DETAILSdetails"> 


     <details class="detailsDETAILS"> 
           <summary class="detailsSUMMARY"> 
           <h2 class="detailsH2">DISCLOSE 0000</h2> 
           </summary> 

     <section class="detailsSECTION"> 


            <nav class="detailsNAV"> 
               <ol class="detailsOL"> 
          <li><a href="#d0001" target="_self">Details article 0001</a></li> 
      <li><a href="#d0002" target="_self">Details article 0002</a></li> 
      <li><a href="#d0003" target="_self">Details article 0003</a></li> 
      <li><a href="#d0004" target="_self">Details article 0004</a></li> 
      <li><a href="#d0005" target="_self">Details article 0005</a></li> 
      <li><a href="#d0006" target="_self">Details article 0006</a></li> 
      <li><a href="#d0007" target="_self">Details article 0007</a></li> 
      <li><a href="#d0008" target="_self">Details article 0008</a></li> 
      <li><a href="#d0009" target="_self">Details article 0009</a></li> 
      <li><a href="#d0010" target="_self">Details article 0010</a></li> 
               </ol> 
               </nav class> 
      </section> 
          </details> 

       </section> 
       </details> 


      </body> 
      </html>

出典

2017-07-12 Gordon Eddey

私が意味する...きっとあなたは理解できませんでした。右？ –

toggleClassそれが動作するはずとして働いています。コードでは、&のトグルするセクションにdetailsSECTIONクラスを適用して、同じクラスにいくつかのスタイルを適用しました。 toggleClassメソッドを使用すると、最初に実行したときに適用したスタイルを削除するセクションからクラスが削除されます。後で再度クリックすると、次のコードvar toggleDETAILS = $(this).next("section.detailsSECTION");を使用しています。これは、クラスdetailsSECTIONを持つ次の要素を読み込みますが、最初にクリックしたときに削除されたため、戻ってきません。

display：noneスタイルだけを持つ.hideのような別のクラスを使用し、このクラスをコード内で切り替えることをお勧めします。

変更後のコードは次のようになります。しかし、あなたが現在のコードを隠して表示するだけのためにそれを使用している方が良いです。セクションでは、もはや言っクラスを持っていた場合、 `$（この）.next（「section.detailsSECTIONは」）`もはやセクションを選択しないだろう、なぜ

<head> 



      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<!-- 
      <script> 
      $(document).ready(function(){ 
       $("summary.detailsSUMMARY").click(function(e){ 

          var toggleDETAILS = $(this).next("section.detailsSECTION"); 
            toggleDETAILS.toggle(); 
                   }) 
            .css("cursor", "pointer"); 
            }); 
      </script> 

      --> 
      <script> 
      $(document).ready(function(){ 
       $("summary.detailsSUMMARY").click(function(e){ 
           var toggleDETAILS = $(this).next("section.detailsSECTION"); 
            toggleDETAILS.toggleClass("hide"); 
                   }) 
            .css("cursor", "pointer"); 


            }); 

      </script> 



      <style> 
      .hide{ 
      display:none; 
      } 
      .detailsSECTION{ 

       font-size:200%; 
       color:red; 
      } 
      </style> 

     </head> 

     <body> 



      <details id="DETAILSdetails"> 


     <details class="detailsDETAILS"> 
           <summary class="detailsSUMMARY"> 
           <h2 class="detailsH2">DISCLOSE 0000</h2> 
           </summary> 

     <section class="detailsSECTION hide"> 


            <nav class="detailsNAV"> 
               <ol class="detailsOL"> 
          <li><a href="#d0001" target="_self">Details article 0001</a></li> 
      <li><a href="#d0002" target="_self">Details article 0002</a></li> 
      <li><a href="#d0003" target="_self">Details article 0003</a></li> 
      <li><a href="#d0004" target="_self">Details article 0004</a></li> 
      <li><a href="#d0005" target="_self">Details article 0005</a></li> 
      <li><a href="#d0006" target="_self">Details article 0006</a></li> 
      <li><a href="#d0007" target="_self">Details article 0007</a></li> 
      <li><a href="#d0008" target="_self">Details article 0008</a></li> 
      <li><a href="#d0009" target="_self">Details article 0009</a></li> 
      <li><a href="#d0010" target="_self">Details article 0010</a></li> 
               </ol> 
               </nav class> 
      </section> 
          </details> 

       </section> 
       </details> 


      </body> 
      </html>

出典

2017-07-12 18:07:35

Shreyasさん、本当にありがとうございました。特に深いところで質問に答える時間をとってくれてありがとうございました。私は今、元のコードの問題は 'display：none'であり、私が試したチュートリアルの例には表示されていないことがわかりました。 –

Ah Shreyas、私は愚かに間違った方法でボタンを押しました。変更する前に自動的に-1が表示されました。ごめんなさい。私は実際にあなたの答えが私に最大点に値すると思います。あなたが言うことができるように、私はかなりの時間、メンバーになっているにもかかわらず、この点ではちょっとしたノブです。私はプラス1を数回クリックしました。私はスコアを変更することを願っています。 –

jqueryトグルではコードは動作しますが、toggleClassでは動作しません

答えて

関連する問題