如何使 Accordion 菜单既可点击又可悬停？ 在以下情况下，悬停第一次起作用。 但是，一旦触发点击事件，悬停就不起作用了
上面的演示，悬停最初是有效的。 但是如果我在单击鼠标后重试，悬停不起作用
代码在这里
.accordion-body{
display:none;
}
.accordion:hover div{
display:block;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function expandAccordionBody(){
var myDivElement = document.getElementById("accbody" );
var cStyle=window.getComputedStyle(myDivElement, null);
if(cStyle.display=='block'){
myDivElement.style.display="none";
}else{
myDivElement.style.display="block";
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="accordion">
<div onclick="expandAccordionBody()"> Head </div>
<div id="accbody" class="accordion-body">
Body
</div>
</div>
</body>
</html>最佳答案
您将不得不稍微修改您的代码并使用 jQuery 的 on 来绑定(bind) click 和 mouseover 事件以及 toggle 实现元素可见性
$("#acchead").on('mouseover click',function() {
$("#accbody").toggle("show");
});.accordion-body{
display:none;
}
.accordion:hover div{
display:block;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="accordion">
<div id="acchead"> Head </div>
<div id="accbody" class="accordion-body">
Body
</div>
</div>
</body>
</html>关于javascript - Accordion 可点击并悬停？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37320889/