Javascript 引导/Css垂直导航栏应显示子菜单onclick而不是hover

引导/Css垂直导航栏应在单击时显示子菜单，而不是悬停

我有一个垂直的导航栏，它在悬停时显示子菜单。我希望单击鼠标，而不是悬停。使用纯css/引导有什么方法可以做到这一点吗

.navigation{
宽度：300px；
}
.main菜单，.子菜单{
列表样式：无；
填充：0；
保证金：0；
}
.主菜单a{
显示：块；
背景色：#CCC；
文字装饰：无；
填充：10px；
颜色：#000；
}
.main菜单a：悬停{
背景色：#C5C5；
}
.main菜单li：悬停子菜单{
显示：块；
最大高度：200px；
}
.子菜单a{
背景色：#999；
}
.子菜单a：悬停{
背景色：#666；
}
.子菜单{
溢出：隐藏；
最大高度：0；
-webkit过渡：所有0.5s都可以轻松过渡；
}

$（“.main菜单li”）。单击（函数（）{
$（“.main菜单li”）.removeClass（'active'）；
$（this.toggleClass（'active'）；
});
.navigation{
宽度：300px；
}
.main菜单，.子菜单{
列表样式：无；
填充：0；
保证金：0；
}
.主菜单a{
显示：块；
背景色：#CCC；
文字装饰：无；
填充：10px；
颜色：#000；
}
.main菜单a：悬停{
背景色：#C5C5；
}
.main菜单li.active.子菜单{
显示：块；
最大高度：200px；
}
.子菜单a{
背景色：#999；
}
.子菜单a：悬停{
背景色：#666；
}
.子菜单{
溢出：隐藏；
最大高度：0；
-webkit过渡：所有0.5s都可以轻松过渡；
}
























$（“.main菜单li”）。单击（函数（）{
$（“.main菜单li”）.removeClass（'active'）；
$（this.toggleClass（'active'）；
});
.navigation{
宽度：300px；
}
.main菜单，.子菜单{
列表样式：无；
填充：0；
保证金：0；
}
.主菜单a{
显示：块；
背景色：#CCC；
文字装饰：无；
填充：10px；
颜色：#000；
}
.main菜单a：悬停{
背景色：#C5C5；
}
.main菜单li.active.子菜单{
显示：块；
最大高度：200px；
}
.子菜单a{
背景色：#999；
}
.子菜单a：悬停{
背景色：#666；
}
.子菜单{
溢出：隐藏；
最大高度：0；
-webkit过渡：所有0.5s都可以轻松过渡；
}























否，CSS不支持单击事件。为此使用jquery您需要使用jquery来实现此行为。使用折叠组件引导很容易实现：否，CSS不支持单击事件。为此使用jquery您需要使用jquery来实现此行为。使用折叠组件引导很容易实现：