手风琴和切换图标的麻烦

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/

Answer 1

这是一个工作演示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');
  }

Answer 2

我编辑了你的小提琴 。

您不应该以这种方式使用addClass和removeClass 。 toggleClass是一个更好（更可读）的解决方案。

Answer 3

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

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

首先删除glyphicon-plus并在之后添加。