手风琴和切换图标的问题答案

【问题标题】：Trouble with Accordion and toggling icons手风琴和切换图标的问题
【发布时间】：2017-01-17 23:14:54
【问题描述】：

我尝试了好几个小时，但似乎我总在放屁我想要实现的是制作一个带有切换图标和向上滑动面板的手风琴。这基本上可以将减号更改为加号，但在我切换单击某个标题时无效。

$('.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/

【问题讨论】：

标签： javascript jquery accordion

【解决方案1】：

我已经编辑了你的Fiddle。

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

【讨论】：

【解决方案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');
  }

【讨论】：

谢谢，但这只是部分解决了问题，我现在可以在你的小提琴中很好地切换它们，但非活动的不会跳回加号而是保持在减号:(
更新了小提琴jsfiddle.net/ju9L9rne/4 我已经将wearg 类名放在一个类转换器中编辑：没关系，第一个手风琴保持减号的问题

【解决方案3】：

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

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

您首先删除 glyphicon-plus，然后再添加它。

【讨论】：