[英]Trouble with Accordion and toggling icons
I am trying this for hours, but seems I have somehow a total brain-fart What I want to achieve is making an accordion with toggling icons and sliding up panels. 我正在尝试这个几个小时,但似乎我有一个完全的大脑屁我想要实现的是制作一个手风琴与切换图标和向上滑动面板。 This basically works the minus changes to plus but not when I toggle click the certain header.
这基本上可以使用减号更改为加号但不会在我切换时单击某个标题。
$('.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');
}
});
This is my fiddle: https://jsfiddle.net/emd381md/11/ 这是我的小提琴: https : //jsfiddle.net/emd381md/11/
Here is a working demo https://jsfiddle.net/ju9L9rne/13/ . 这是一个工作演示https://jsfiddle.net/ju9L9rne/13/ 。
Issues were with the names of classes in the if statement. 问题与if语句中的类名称有关。 You were using
.unalex-plus
which is a class all the accordians have, which is what caused the problems. 你使用的是
.unalex-plus
,这是所有手风琴家都有的一个类,这就是造成问题的原因。
So I just changed that class to either .glyphicon-minus
or .glyphicon-plus
depending on, which was needed. 所以我只是根据需要将该类更改为
.glyphicon-minus
或.glyphicon-plus
。
The changed code: 更改的代码:
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');
}
I've edited your Fiddle . 我编辑了你的小提琴 。
You shouldn't use addClass
and removeClass
in that manner. 您不应该以这种方式使用
addClass
和removeClass
。 toggleClass is a better (and more readable) solution. toggleClass是一个更好(更可读)的解决方案。
I don't check your whole code but this looks a bit crazy, maybe the error is here? 我不检查你的整个代码,但这看起来有点疯狂,也许错误在这里?
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');
You first remove glyphicon-plus and add it afterwards. 首先删除glyphicon-plus并在之后添加。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.