Question

我已经浏览了整个网络，完成了toggleClass教程并看到了它们的工作原理。但是，在我自己努力升级下面列出的工作切换方法时，我正在努力。 toggleClass方法打开一次，但不设置css标记的样式，也不会切换为关闭。切换方法工作正常。我无法理解为什么在toggleClass中没有选择css标记，我在下面已经评论过它以进行比较，所以一些有用的boffin可以指导我。我真的需要一些帮助。 - Tx。 Gordon Eddey

            <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>

Answer 1

toggleClass正在发挥作用。在您的代码中，您已将类详细信息应用于要切换的部分。还将一些样式应用于同一个类。因此，当您使用toggleClass方法时，它会从该部分中删除该类，该类将删除您在第一次运行时应用的样式。稍后当您再次单击时，您将使用以下代码var toggleDETAILS = $(this).next("section.detailsSECTION");，该代码将读取具有类detailsSECTION的下一个元素，但它不存在，因为它在您第一次单击时被删除，因此它不会切换回来。

我建议您使用另一个类，例如.hide只显示：none样式，然后在代码中切换此类。

更改后，您的代码将看起来像这样。但是，如果您使用它只是为了隐藏并显示您当前的代码更好。

<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>

代码适用于jquery切换但不适用于toggleClass

1 个答案: