Question

我已经梳理了几十个Bootstrap手风琴菜单，拼凑了我需要的大部分内容，但是我在使用图标切换脚本时遇到了麻烦。

$(parent).find('.glyphicon').not($(event.target)).toggleClass('glyphicon-plus glyphicon-minus');

你可以在这里看到整个测试： http://www.bootply.com/122048

Answer 1

    make_minus = false;  
    if($this.find('.glyphicon').hasClass('glyphicon-plus'))
    {
      make_minus = true;
    }

    $('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');

    if(make_minus)
    {
      $this.find('.glyphicon').removeClass('glyphicon-plus').addClass('glyphicon-minus');
    }

http://www.bootply.com/122084

Answer 2

为什么不使用.toggleClass（glyphicon-minus glyphicon-plus）在图标类之间切换。我发现通过这种方式使用手风琴来切换图标要容易得多。然后我在if语句中运行.hasClass（＆＃39; active＆＃39;），根据当前的折叠项目是否处于活动状态（打开），我从手风琴中添加和删除。

var lastIcon;
  $('.accordion > .accordion-item').click(function () {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $(this).find('i').toggleClass('fa-plus fa-minus');
      lastIcon = null;
      return true;
    }
    $('.accordion > .accordion-item').removeClass('active');
    $(this).addClass('active');
    $(this).find('i').add(lastIcon).toggleClass('fa-plus fa-minus');
    lastIcon = $(this).find('i');
  });

这是我最近编写的一个代码示例，用于我自己的网站所需的手风琴。显然有一些选择器在这个内部抓住了DOM，但是因为我没有看到你如何抓住DOM，除了glyphicons我不知道如何编辑它以使用你的标记。

Bootstrap 3：带折叠和图标切换的折叠式菜单

2 个答案: