手风琴和切换图标出现问题

Question

我已经试了几个小时，但似乎我的大脑有点抽风了。我想要实现的是创建一个带有可切换图标和滑动面板的手风琴效果。基本上它能够工作，当我切换点击某个标题时，负号变为加号。

$('.accordion-wrapper').on('click', function (e) {
    e.stopPropagation();

    $(this).next('div.accordion-panel').stop(true, false, true).slideToggle();
    // $(this).find('.unalex-plus').toggleClass('glyphicon-plus glyphicon-minus');
    $('div.accordion-panel').not($(this).next('div.accordion-panel')).slideUp();

    if (!$(this).hasClass('active-panel')) {
        $('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
        $(this).find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus ');
        $(this).addClass("active-panel");
    } else {
        $('this').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
        $('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');
        $(this).removeClass('active-panel');
    }
});

这是我的代码示例：https://jsfiddle.net/emd381md/11/。

- Elia

Answer 1

我已经修改了你的Fiddle。

你不应该以那种方式使用addClass和removeClass。 toggleClass是一个更好（且更易读）的解决方案。

- Bellu

---

哦，太感谢了，问题解决了 :D <3 我真的觉得自己刚才脑子抽了一下。 - Elia

Answer 2

这里有一个可用的演示 https://jsfiddle.net/ju9L9rne/13/。

问题出在if语句中类名的命名上。您正在使用.unalex-plus，它是所有手风琴都具有的一个类，这就导致了问题。

所以我只需将该类更改为.glyphicon-minus或.glyphicon-plus，具体取决于需要哪个。

更改后的代码:

  if (!$(this).hasClass('active-panel')) {
    $('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
    $(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus ');
    $(this).addClass("active-panel");
  } else {
    $('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
    $(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus');
    $(this).removeClass('active-panel');
  }

- Callum

---

谢谢，但这只是部分解决了问题。我可以在您的代码片段中切换它们，但非活动状态下的元素并没有跳回加号而是停留在减号上 :( - Elia

更新了这个fiddle https://jsfiddle.net/ju9L9rne/4/，我在其中一个class changers中放错了类名 编辑：算了，第一个手风琴仍然存在保持减号的问题。 - Callum

Answer 3

我没有检查你的整个代码，但这看起来有些疯狂，也许错误就在这里？

$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');

你需要先移除 glyphicon-plus，然后再添加它。

- Mo0812