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

我已编辑了您的Fiddle。

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

Answer 3

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

public partial class UserControl1 : UserControl
{
    [Browsable(true)]
    [Description("Select some.")]
    [Category("Selection Test"), DisplayName("Bool List")]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
    public List<BoolProperty> BoolList { get; set; } = new List<BoolProperty>();

    public UserControl1()
    {
        InitializeComponent();
    }
}

[Serializable]
public class BoolProperty
{
    public string Name { get; set; }

    public bool Value { get; set; }

    public override string ToString()
    {
        return Name ?? "Empty Boolean Property";
    }
}

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

手风琴和切换图标的麻烦

3 个答案: