手風琴可點擊並懸停？
[英]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>
6 個解決方案
解決方案1
1 2016-05-19 11:00:46
您將不得不稍微修改您的代碼，並使用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>
解決方案2
1 2016-05-19 11:07:55
由於您已標記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>
解決方案3
0 2016-05-19 10:54:18
請嘗試以下操作：
.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;
}
解決方案4
0 2016-05-19 11:08:27
JS
if(cStyle.className.indexOf('block') == -1){
myDivElement.className=myDivElement.className + " block";
}else{
myDivElement.className = "accordion-body";
}
CSS
.hover {display:none;}
解決方案5
0 2016-05-19 11:14:58
刪除該懸停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";
}
希望這可以幫助。
解決方案6
0 2016-05-23 09:32:27
Hover on Clickable
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.