Javascript 如何为“添加活动状态”；嵌套的；手风琴

我在codepen找到了这个使用“ul”的高效实用嵌套手风琴：

具体如下：

$（'.toggle'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
if（$this.next（）.hasClass（'show'））{
$this.next（）.removeClass（'show'）；
$this.next（）.slideUp（350）；
}否则{
$this.parent（）.parent（）.find（'li.inner'）.removeClass（'show'）；
$this.parent（）.parent（）.find（'li.inner'）.slideUp（350）；
$this.next（）.toggleClass（'show'）；
$this.next（）.slideToggle（350）；
}
});
url（'http://fonts.googleapis.com/css?family=Pacifico|开放+SAN:300400600’；
* {
框大小：边框框；
字体系列：“开放式Sans”，无衬线；
字体大小：300；
}
.主动{
文字装饰：下划线！重要；
}
a{
文字装饰：无；
颜色：继承；
}
p{
字体大小：1.1米；
利润率：1米0；
}
.说明{
利润率：1米自动2.25米；
}
身体{
宽度：40%；
最小宽度：300px；
最大宽度：400px；
保证金：1.5em自动；
颜色：#333；
}
h1{
字体系列：“Pacifico”，草书；
字体大小：400；
字号：2.5em；
}
保险商实验室{
列表样式：无；
填充：0；
}
内华达州{
左：1米；
溢出：隐藏；
显示：无；
}
内秀{
/*显示：块*/
}
ulli{
边缘：.5em0；
}
美国保险商协会{
宽度：100%；
显示：块；
背景：rgba（0,0,0,0.78）；
颜色：#fefefe；
填充：.75em；
边界半径：0.15em；
过渡：背景。3s轻松；
}
切换：悬停{
背景：rgba（0,0,0,0.9）；
}

很酷的手风琴

您可以简单地在JavaScript中切换.show类（如果在CSS中display:block没有注释），但会丢失动画。




选择1
选择2
选择3




选择1
选择2
选择3






Lorem ipsum dolor sit amet，是一位杰出的献身者。马塞纳斯·坦普斯·普拉西拉。杜瓦是一位精英和多洛·劳里特·帕特。阿利奎姆乌尔特里斯莫里斯马蒂斯。埃尼安诅咒乌尔特里斯和瓦里乌斯。阿利奎阿利克达皮布斯酒店
布兰迪特。在hac habitasse Plateum，一句名言。Sed risus velit，Pelletsque eu enim ac，ultricies pretium felis。




子项将在关闭其父项时自动关闭。


选择3








只要internal元素将internal作为它的一个类，那么它就会被切换。


Lorem ipsum dolor sit amet，是一位杰出的献身者。马塞纳斯·坦普斯·普拉西拉。杜瓦是一位精英和多洛·劳里特·帕特。阿利奎姆乌尔特里斯莫里斯马蒂斯。埃尼安诅咒乌尔特里斯和瓦里乌斯。阿利奎阿利克达皮布斯酒店
布兰迪特。在hac habitasse Plateum，一句名言。Sed risus velit，Pelletsque eu enim ac，ultricies pretium felis。




选择2
选择3


检查以下代码

Jquery：

 $('.toggle').click(function(e) { e.preventDefault();        
  var $this = $(this);  
  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.parent().find('.active').removeClass('active')    
    $this.next().slideUp(350);
   } else {
    $this.parent().parent().find('.active').removeClass('active');       
    $this.parent('ul').find('.active').removeClass('active')
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.toggleClass('active');      
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
}
});

CSS

.active{
 background-color :blue !important;
}

它正在标记中添加活动类：

<a class="toggle active" href="javascript:void(0);">Item 1</a>

检查以下代码

Jquery：

 $('.toggle').click(function(e) { e.preventDefault();        
  var $this = $(this);  
  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.parent().find('.active').removeClass('active')    
    $this.next().slideUp(350);
   } else {
    $this.parent().parent().find('.active').removeClass('active');       
    $this.parent('ul').find('.active').removeClass('active')
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.toggleClass('active');      
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
}
});

CSS

.active{
 background-color :blue !important;
}

它正在标记中添加活动类：

<a class="toggle active" href="javascript:void(0);">Item 1</a>

这里我更新了我的答案，因为您对我的答案发表了评论，请查看


$（'.toggle'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
if（$this.next（）.hasClass（'show'））{
$this.next（）.removeClass（'show'）；
/*只需在这里添加类。活动*/
$this.removeClass（“活动”）；
$this.next（）.slideUp（350）；
}否则{
$this.parent（）.parent（）.find（'li.inner'）.removeClass（'show'）；
if（$this.hasClass（'parent'））{
/*只需删除此处类。从早期应用开始处于活动状态*/
$this.parents（“.accordion”）.find（“.toggle”）.removeClass（“active”）；
}else if（$this.hasClass（'child'））{
/*只需删除此处的类。从早期开始活动适用于儿童*/
$this.parents（“.accordion”）.find（“.toggle.child”）.removeClass（“active”）；
}否则{
/*仅删除此处类。从早期开始活动适用于儿童的儿童*/
$this.parents（“.accordion”）.find（“.toggle.child”）.removeClass（“active”）；
}
$this.parent（）.parent（）.find（'li.inner'）.slideUp（350）；
$this.next（）.toggleClass（'show'）；
/*只需在这里添加类。活动*/
$this.addClass（“活动”）；
$this.next（）.slideToggle（350）；
}
});
url（'http://fonts.googleapis.com/css?family=Pacifico|开放+SAN:300400600’；
* {
框大小：边框框；
字体系列：“开放式Sans”，无衬线；
字体大小：300；
}
.主动{
文字装饰：下划线！重要；
}
a{
文字装饰：无；
颜色：继承；
}
p{
字体大小：1.1米；
利润率：1米0；
}
.说明{
利润率：1米自动2.25米；
}
身体{
宽度：40%；
最小宽度：300px；
最大宽度：400px；
保证金：1.5em自动；
颜色：#333；
}
h1{
字体系列：“Pacifico”，草书；
字体大小：400；
字号：2.5em；
}
保险商实验室{
列表样式：无；
填充：0；
}
内华达州{
左：1米；
溢出：隐藏；
显示：无；
}
内秀{
/*显示：块*/
}
ulli{
边缘：.5em0；
}
美国保险商协会{
宽度：100%；
显示