Javascript 如何使所选菜单保持选中状态jquery、css、html

手风琴菜单，必须使子菜单在点击js后保持选中状态。或者css

不是html中的静态解决方案。 需要包含jquery和css的解决方案 单击后，它应显示为与悬停相同

看看小提琴

$（文档）.ready（函数（）{
$（“#accordion>li>div”）。单击（函数（）{
$（“#子菜单li”）.slideUp（）；
如果（！$（this）.next（）是（“：可见”））{
$（this.next（）.slideDown（）；
}
});
});
手风琴{
宽度：100%；
最大宽度：260px；
背景：#FFF；
保证金：0；
填充：0；
框大小：边框框；
}
.手风琴{
光标：指针；
显示：块；
填充：15px 15px 15px 42px；
字体大小：14px；
字号：700；
边框顶部：1px实心#CCC；
边框底部：1px实心#CCC；
右边框：1px实心#CCC；
位置：相对位置；
-webkit过渡：所有0.4s易用性；
-o型过渡：所有0.4s缓解；
过渡：所有0.4s缓解；
}
/*-------------子菜单-----------------------------*/
.子菜单{
填充：0px；
显示：无；
字体大小：14px；
}
.子菜单li{
边框底部：1px实心#4b4a5e；
}
.子菜单a{
显示：块；
文字装饰：无；
颜色：#23222d；
背景色：#CCC；
填充：12px；
左侧填充：42px；
-webkit过渡：所有0.25秒轻松；
-o型过渡：所有0.25秒的缓解；
过渡：所有0.25秒缓解；
}
#子菜单li.active{
显示：块；
}
.子菜单a：悬停{
背景：#b63b4d；
颜色：#FFF；
}

菜单2







菜单3

希望这就是你想要的

$（文档）.ready（函数（）{
$（“#accordion>li>div”）。单击（函数（）{
$（“#子菜单li”）.slideUp（）；
如果（！$（this）.next（）是（“：可见”））{
$（this.next（）.slideDown（）；
}
});
$（“.li a”子菜单）。单击（函数（）{
$（“.submenu li a.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
});
});
手风琴{
宽度：100%；
最大宽度：260px；
背景：#FFF；
保证金：0；
填充：0；
框大小：边框框；
}
.手风琴{
光标：指针；
显示：块；
填充：15px 15px 15px 42px；
字体大小：14px；
字号：700；
边框顶部：1px实心#CCC；
边框底部：1px实心#CCC；
右边框：1px实心#CCC；
位置：相对位置；
-webkit过渡：所有0.4s易用性；
-o型过渡：所有0.4s缓解；
过渡：所有0.4s缓解；
}
/*-------------子菜单-----------------------------*/
.子菜单{
填充：0px；
显示：无；
字体大小：14px；
}
.子菜单li{
边框底部：1px实心#4b4a5e；
}
.子菜单a{
显示：块；
文字装饰：无；
颜色：#23222d；
背景色：#CCC；
填充：12px；
左侧填充：42px；
-webkit过渡：所有0.25秒轻松；
-o型过渡：所有0.25秒的缓解；
过渡：所有0.25秒缓解；
}
#子菜单li.active{
显示：块；
}
.子菜单a：悬停{
背景：#b63b4d；
颜色：#FFF；
}
.子菜单li a.激活{
背景：#b63b4d；
颜色：#FFF；
}

菜单2







菜单3

为

以及代码片段：


$（文档）.ready（函数（）{
$（“#accordion>li>div”）。单击（函数（）{
如果（！$（this）.next（）是（“：可见”））{
$（this.next（）.slideDown（）；
}否则{
$（this.next（）.slideUp（）；
}
});
$（“.submenu a”）。单击（函数（）{
$（this）.toggleClass（“活动”）.parent（）.sibbins（）.find（“a”）.removeClass（“活动”）；
});
});
手风琴{
宽度：100%；
最大宽度：260px；
背景：#FFF；
保证金：0；
填充：0；
框大小：边框框；
}
.手风琴{
光标：指针；
显示：块；
填充：15px 15px 15px 42px；
字体大小：14px；
字号：700；
边框顶部：1px实心#CCC；
边框底部：1px实心#CCC；
右边框：1px实心#CCC；
位置：相对位置；
-webkit过渡：所有0.4s易用性；
-o型过渡：所有0.4s缓解；
过渡：所有0.4s缓解；
}
/*-------------子菜单-----------------------------*/
.子菜单{
填充：0px；
显示：无；
字体大小：14px；
}
.子菜单li{
边框底部：1px实心#4b4a5e；
}
.子菜单a{
显示：块；
文字装饰：无；
颜色：#23222d；
背景色：#CCC；
填充：12px；
左侧填充：42px；
-webkit过渡：所有0.25秒轻松；
-o型过渡：所有0.25秒的缓解；
过渡：所有0.25秒缓解；
}
.子菜单a：悬停{
背景：#b63b4d；
颜色：#FFF；
}
a、 活跃的{
背景：#b63b4d；
颜色：#FFF；
}



菜单2







菜单3






无法使用cookie或本地存储。只是想让单击的子菜单保持选中状态，直到单击任何内容。悬停时的显示方式，单击后应显示。
a.active {
  background: #b63b4d;
  color: #FFF;
}

 $(document).ready(function() {

   $("#accordion > li > div").click(function() {
     if (!$(this).next().is(":visible")) {
       $(this).next().slideDown();
     } else {
       $(this).next().slideUp();
     }
   });

   $(".submenu a").click(function() {
            $(this).toggleClass("active").parent().siblings().find("a").removeClass("active");
   });

 });