Блог

Главная - Вопросы по программированию - Как мне вернуть класс после его удаления?

Как мне вернуть класс после его удаления?

#javascript #jquery #class

#javascript #jquery #класс

Вопрос:

У меня есть выпадающее меню со стрелкой справа, которое должно опускаться при нажатии на него. Но он не возвращается, когда вы снова нажимаете на меню. Вы можете увидеть пример на картинке ниже:

Когда вы ничего не нажимаете:

https://i.gyazo.com/b7cec5471aa9beff1611421e3ff36747.png

Когда вы нажимаете что-либо:

https://i.gyazo.com/5744d2459c19d2f9a490a5fe337b4ec8.png

Когда вы нажимаете на тот же элемент (стрелка не перемещается назад)

https://i.gyazo.com/b324f91d673e8ad98645f9be95298a30.png

Мой код Jquery:

 // menu toggle
    jQuery(".advanced-sidebar-nav").on(
        "click",
        ".advanced-sidebar-nav-toggle",
        function(e) {
            e.preventDefault();


            jQuery(".advanced-sidebar-nav-menu-open").each(
                function() {
                    $(this).removeClass("advanced-sidebar-nav-menu-open").siblings("ul").slideUp(300);
                    $(this).children(".advanced-sidebar-nav-toggle-open").removeClass("advanced-sidebar-nav-toggle-open");
                }
            );

            jQuery(this).toggleClass("advanced-sidebar-nav-toggle-open");

            if(jQuery(this).hasClass("advanced-sidebar-nav-toggle-open")) {
                jQuery(this)
                      .parent("a")
                      .addClass("advanced-sidebar-nav-menu-open")
                      .siblings("ul")
                      .slideDown(300);

                  } else {
                    jQuery(this)
                      .parent("a")
                      .removeClass("advanced-sidebar-nav-menu-open")
                      .siblings("ul")
                      .slideUp(300);
                  }
        }
    );

HTML-код:

 <div class="advanced-sidebar-nav advanced-sidebar-nav-default"><ul id="menu-sidebar-menu" class="advanced-sidebar-menu"><li id="menu-item-4701" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4701"><a href="#">Laptops<span class="advanced-sidebar-nav-toggle"></span></a>
<ul class="sub-menu">
    <li id="menu-item-4696" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4696"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i3/" style="padding-left:40px !important">i3</a></li>
    <li id="menu-item-4697" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4697"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i5/" style="padding-left:40px !important">i5</a></li>
    <li id="menu-item-4698" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4698"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i7/" style="padding-left:40px !important">i7</a></li>
    <li id="menu-item-4695" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4695"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/game-laptops/" style="padding-left:40px !important">Game laptops</a></li>
</ul>
</li>
<li id="menu-item-4703" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4703"><a href="#">Computers<span class="advanced-sidebar-nav-toggle"></span></a>
<ul class="sub-menu">
    <li id="menu-item-4709" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4709"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/computers/tower/" style="padding-left:40px !important">Tower</a></li>
    <li id="menu-item-4710" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4710"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/computers/workstation/" style="padding-left:40px !important">Workstation</a></li>
    <li id="menu-item-4708" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4708"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/computers/game-computers/" style="padding-left:40px !important">Game computers</a></li>
</ul>
</li>
<li id="menu-item-4704" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4704"><a href="#">Monitoren<span class="advanced-sidebar-nav-toggle"></span></a>
<ul class="sub-menu">
    <li id="menu-item-4712" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4712"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/19/" style="padding-left:40px !important">19″</a></li>
    <li id="menu-item-4713" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4713"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/22/" style="padding-left:40px !important">22″</a></li>
    <li id="menu-item-4714" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4714"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/24/" style="padding-left:40px !important">24″</a></li>
    <li id="menu-item-4715" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4715"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/27/" style="padding-left:40px !important">27″</a></li>
    <li id="menu-item-4716" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4716"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/32/" style="padding-left:40px !important">32″</a></li>
</ul>
</li>
<li id="menu-item-4705" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4705"><a href="#">Netwerkapparatuur<span class="advanced-sidebar-nav-toggle"></span></a>
<ul class="sub-menu">
    <li id="menu-item-4721" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4721"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/switchers/" style="padding-left:40px !important">Switchers</a></li>
    <li id="menu-item-4718" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4718"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/nas/" style="padding-left:40px !important">Nas</a></li>
    <li id="menu-item-4722" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4722"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/thin-clients/" style="padding-left:40px !important">Thin clients</a></li>
    <li id="menu-item-4717" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4717"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/accespoints/" style="padding-left:40px !important">Access Points</a></li>
    <li id="menu-item-4719" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4719"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/repeaters/" style="padding-left:40px !important">Repeaters</a></li>
    <li id="menu-item-4720" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4720"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/routers/" style="padding-left:40px !important">Routers</a></li>
</ul>
</li>
<li id="menu-item-4706" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4706"><a href="#">Hard Drive<span class="advanced-sidebar-nav-toggle"></span></a>
<ul class="sub-menu">
    <li id="menu-item-4725" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4725"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/ssd-drive/" style="padding-left:40px !important">SSD Drive</a></li>
    <li id="menu-item-4726" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4726"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/ssd-m-2/" style="padding-left:40px !important">SSD M.2</a></li>
    <li id="menu-item-4727" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4727"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/ssd-msata/" style="padding-left:40px !important">SSD Msata</a></li>
    <li id="menu-item-4723" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4723"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/sata-2-5/" style="padding-left:40px !important">Sata 2.5″</a></li>
    <li id="menu-item-4724" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4724"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/sata-3-5/" style="padding-left:40px !important">Sata 3.5″</a></li>
</ul>
</li>
<li id="menu-item-4707" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4707"><a href="#">Accessoires<span class="advanced-sidebar-nav-toggle"></span></a>
<ul class="sub-menu">
    <li id="menu-item-4729" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4729"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/accessoires/kabels/" style="padding-left:40px !important">Kabels</a></li>
    <li id="menu-item-4728" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4728"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/accessoires/adapters/" style="padding-left:40px !important">Adapters</a></li>
    <li id="menu-item-4730" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4730"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/accessoires/memory/" style="padding-left:40px !important">Memory</a></li>
</ul>
</li>
</ul></div>

Комментарии:

1. Трудно определить проблему, не заглядывая в ваш HTML-код. Не могли бы вы включить это, пожалуйста.

Ответ №1:

Это происходит потому, что каждый щелчок удаляет все -open классы, а затем сразу добавляет его к текущему элементу. Итак, в следующий раз будет то же самое — удалить добавить, поэтому при каждом нажатии будет добавляться -open класс. Чтобы исправить это, вы не должны удалять -open класс для активного элемента чем-то вроде этого:

         const self = this;

        jQuery(".advanced-sidebar-nav-menu-open").each(
            function() {
                $(this).removeClass("advanced-sidebar-nav-menu-open").siblings("ul").slideUp(300);
                $(this).children(".advanced-sidebar-nav-toggle-open").not(self).removeClass("advanced-sidebar-nav-toggle-open");
            }
        );

Комментарии:

1. Это действительно было исправлено, спасибо, что помогли мне. Реквизит!