Javascript CSS属性更新不适用于鼠标单击

我正在努力实现手风琴。 我的手风琴应该在鼠标悬停在“手风琴头”上展开。 同时，鼠标点击“手风琴头”可以显示/隐藏手风琴体

我通过悬停上的CSS进行了显示/隐藏。 但当我点击鼠标事件时，该功能不起作用

这是样品

你需要改变

myDivElement.style.display = none;
myDivElement.style.display = block;  

到

您需要更改

myDivElement.style.display = none;
myDivElement.style.display = block;  

到

---

我已经创建了一个可用的演示，请检查下面的链接，不要单击鼠标。用这个替换JavaScript代码并删除css属性

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

---

我已经创建了一个可用的演示，请检查下面的链接，不要单击鼠标。用这个替换JavaScript代码并删除css属性

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

---

我冒昧地更改了一下您的代码。这个代码有效。 希望这就是你想要做的。。。。 我没有使用纯Javascript，而是使用jQuery事件单击并悬停

这里是工作代码的链接

HTML代码

<div class="accordion">
<div class="headA">
<a href="#">Head</a>
</div>
<div id="accbody" class="accordion-body">
<a href="#">Body</a>
</div>
</div>

jQuery代码

$(document).ready(function() {
  // on page load hide accordion body
  var accordionBody = $('#accbody');
  accordionBody.hide();
  // first make on click event happening
  // when user clicks on "Head" accordion "Body will show up"
  $('.headA').click(function() {
    if (accordionBody.is(':hidden')) {
      accordionBody.slideDown(400);
    } else {
      accordionBody.slideUp(400);
    }
  });

  $('.headA').hover(function() {
    if (accordionBody.is(':hidden')) {
      accordionBody.slideDown(400);
    } else {
      accordionBody.slideUp(400); // turn this off if you want only to slide down and not back up
    }
  });

});

---

我随意更改了一下你的代码。这个代码有效。 希望这就是你想要做的。。。。 我没有使用纯Javascript，而是使用jQuery事件单击并悬停

这里是工作代码的链接

HTML代码

<div class="accordion">
<div class="headA">
<a href="#">Head</a>
</div>
<div id="accbody" class="accordion-body">
<a href="#">Body</a>
</div>
</div>

jQuery代码

$(document).ready(function() {
  // on page load hide accordion body
  var accordionBody = $('#accbody');
  accordionBody.hide();
  // first make on click event happening
  // when user clicks on "Head" accordion "Body will show up"
  $('.headA').click(function() {
    if (accordionBody.is(':hidden')) {
      accordionBody.slideDown(400);
    } else {
      accordionBody.slideUp(400);
    }
  });

  $('.headA').hover(function() {
    if (accordionBody.is(':hidden')) {
      accordionBody.slideDown(400);
    } else {
      accordionBody.slideUp(400); // turn this off if you want only to slide down and not back up
    }
  });

});

---

---

“无”

和

“块”

缺少双引号问题是，在执行鼠标单击后，显示/隐藏未在悬停状态下工作。

“无”

和

“块”

缺少双引号问题是，执行鼠标单击后，显示/隐藏未在悬停上工作。谢谢ozil。这是我想与大家分享的另一个问题。我的意思是，悬停显示/隐藏正在工作。一旦鼠标点击发生，悬停就无法工作。谢谢ozil。这是我想与大家分享的另一个问题。我的意思是，悬停显示/隐藏正在工作。一旦鼠标点击发生，鼠标悬停就不起作用了。嗨，Randhir，你已经移除了鼠标悬停，我需要在鼠标悬停和鼠标点击上显示/隐藏。你怎么能做到这一点？我的意思是当你点击div时，它会自动将鼠标悬停在上面。因此，hove和click事件将同时触发。你不认为这两个事件会发生冲突吗？嗨，Randhir，你已经移除了鼠标悬停，我需要在悬停和鼠标点击上显示/隐藏，你怎么能做到这一点？我的意思是当你点击div时，它会自动将鼠标悬停在上面。因此，hove和click事件将同时触发。你不认为这两个事件会冲突吗？如果仍然存在，你可以复制粘贴上面显示的代码。让我知道你的结局！！但是在悬停“accordion body”时，“accordion body”是隐藏的。“accordion body”应该是可访问的，就像hovergreat@user2555212上的菜单项一样，只需注释掉最后一行中的其他行，就可以调用slideUp（）。我的注意事项是“//如果您只想向下滑动而不想后退，请关闭此选项”如果仍然存在，您可以复制粘贴上面显示的我的代码。让我知道你的结局！！但是在悬停“accordion body”时，“accordion body”是隐藏的。“accordion body”应该是可访问的，就像hovergreat@user2555212上的菜单项一样，只需注释掉最后一行中的其他行，就可以调用slideUp（）。我的便笺中有“/”如果您只想向下滑动而不想后退，请关闭此选项”