javascript - 在 jquery 中/使用 jquery 更改元素/类

Question

我是 jQuery 的新手，现在使用它进行导航，在移动或小 View 中滑入和滑出。这工作正常且正确，但我使用加号图标打开子菜单，当子菜单打开时，它会变成减号图标。

但当子菜单关闭时，它不会变回加号图标。

代码如下:

$(document).ready(function() {

    $('<span class="menu-expander"><span class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');


    $('#menu-toggle').click(function() {
        $(this).next('#navigation-main').slideToggle();
    });

    $('.menu-expander').click(function() {
        $(this).prev('.level_2').slideToggle();
        $(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
    });

});

我认为“有趣”的部分可能是第二个功能，第一个仍然是汉堡包图标，它打开导航，可以正常工作(好吧，它不显示滑动动画，第二个做什么...不知道，为什么它不起作用...)。

所以第二部分是加分项。当我点击加号时，子菜单滑入并且加号变为减号，但是当我单击返回减号时它不会变回加号。

有没有人知道为什么它不起作用或者可以向我解释，我怎样才能让它起作用？

问候，马库斯

Answer 1

问题是您的选择器试图找到同时包含 plusicon 和 vertical 类的 span，但是在第一次调用之后:

$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');

至于删除所述类，它无法找到您的目标 span。

要解决这个问题，您可以为您的图标分配一个 ID(下一个示例中的 iconId)或另一个类，以便始终可以找到它

$('<span class="menu-expander"><span id="iconId" class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');

...

$('.menu-expander').click(function() {
  $(this).prev('.level_2').slideToggle();
  $(this).children('#iconId').toggleClass('plusicon vertical');
});