[英]Accordion clickable and hover?
如何使手风琴菜单可点击和悬停? 在以下情况下,悬停是第一次工作。 但是,一旦触发点击事件,悬停功能就无法正常工作
上面的演示,悬停功能最初正在运行。 但是,如果我在单击鼠标后再试一次,则悬停无法正常工作
这里的代码
.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
绑定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>
由于您已标记jQuery,因此我为您提供了此解决方案。
它的工作方式如下:
将鼠标移到头部上方时,将显示身体。 当他离开时,身体被隐藏起来。
当用户单击头部时,将显示身体,并且悬停被禁用。 首先,他需要再次单击头部以将其关闭,然后,悬停将再次起作用。
我希望这是您要实现的目标。
$(function() { $('.accordion-body').hide(); $('#acchead').on('click', function() { if ($(this).hasClass('clickActive')) { $('.accordion-body').hide(); $(this).removeClass('clickActive'); } else { $('.accordion-body').show(); $(this).addClass('clickActive'); } }).on('mouseenter', function() { if (!$(this).hasClass('clickActive')) { $('.accordion-body').show(); } }).on('mouseleave', function() { if (!$(this).hasClass('clickActive')) { $('.accordion-body').hide(); } }); });
#acchead { padding: 1em; border: 1px solid blue; } .accordion-body { padding: 1em; border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accordion"> <div id="acchead">Head</div> <div class="accordion-body"> Body </div> </div>
请尝试以下操作:
.accordion:hover div{
display:block !important;
}
正如Shoaib Iqbal所述,内联css会覆盖样式表,因此您需要重要的一点是在悬停时覆盖内联css。
或者,您可以尝试在click on函数中添加和删除js中的类。 JS:
if(myDivElement.className == "accordion-body open"){
myDivElement.className = "accordion-body";//reset class
}else{
myDivElement.className = "accordion-body open";
}
CSS:
#accbody.open{
display:block;
}
if(cStyle.className.indexOf('block') == -1){
myDivElement.className=myDivElement.className + " block";
}else{
myDivElement.className = "accordion-body";
}
.hover {display:none;}
删除该悬停CSS。
.accordion:hover div{
display:block ;
}
只需为DIV
添加mouseout
和mouseover
事件。
<div onclick="expandAccordionBody()" onmouseover="expandAccordionBody1()" onmouseout="expandAccordionBody2()"> Head </div>
JS函数是:
function expandAccordionBody1(){
var myDivElement = document.getElementById("accbody" );
myDivElement.style.display="block";
}
function expandAccordionBody2(){
var myDivElement = document.getElementById("accbody" );
myDivElement.style.display="none";
}
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.