JS

Question

如何使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>

Answer 1

您必须稍微修改您的代码并使用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>

Answer 2

由于您已经标记了jQuery，我为您制作了此解决方案。

它的工作原理如下：

当鼠标移动到头部时，会显示身体。当他离开时，身体就会被隐藏起来当用户点击头部时，将显示正文，并禁用悬停。首先，他需要再次点击头部才能关闭，之后悬停再次起作用。

我希望这是你想要实现的目标。

＆＃13;

$(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();
    }
  });
});

＆＃13;

#acchead {
  padding: 1em;
  border: 1px solid blue;
}
.accordion-body {
  padding: 1em;
  border: 1px solid red;
}

＆＃13;

<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>

＆＃13;

Answer 3

尝试以下方法：

.accordion:hover div{
      display:block !important;
}

正如Shoaib Iqbal所提到的，内联css会覆盖样式表，所以你需要重要的是在悬停时覆盖内联css。

或者，您可以尝试在点击功能中添加和删除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; }

Answer 4

JS

if(cStyle.className.indexOf('block') == -1){
    myDivElement.className=myDivElement.className + " block";
}else{
    myDivElement.className = "accordion-body";
}

CSS

.hover {display:none;}

Answer 5

删除悬停的CSS。

.accordion:hover div{
      display:block ;
}

只需为mouseout添加mouseover和DIV事件。

<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";
}

希望这有帮助。

Answer 6

此处的工作代码Demo

代码可以即兴创作。

CSS

.accordion-body{display:none;}.accordion:hover div{display:block;}

手风琴可点击并悬停？

6 个答案:

JS

CSS