Javascript 鼠标移过去，鼠标移出去。悬停时折叠内容标题

我试图在一个有列表项的内容头上进行简单的折叠。目前我使用的JavaScript设置为onClick。我想把它改为mouseOver（扩展）和mouseOut（返回到崩溃）

我还不太了解JavaScript，但我正在研究它。谢谢

function headerClicked(headerObj) {
  if ($(headerObj).parent().find('.contentList').css('display') == 'none') $(headerObj).parent().find('.contentList').slideDown(300);
  else $(headerObj).parent().find('.contentList').slideUp(300);
}

---

我看到您正在使用JQuery，为什么不添加一个事件处理程序，以便在鼠标打开或离开标题时作出反应？您可以使用JQuery中的mouse mouseout函数来实现这一点

当鼠标离开时，你可以这样写

$(".header").mouseout(function(e){
    $(e.currentTarget).parent().find('.contentList').slideUp(300)
})

---

文档在这里，有很多解决您问题的方法。e、 g使用jQuery hover可以轻松地处理它 . 但对于这一次，最简单的解决方案可以是以下一个

在这里，我没有使用“onClick”函数，而是使用了两个函数，一个用于“onmouseover”，另一个用于“onmouseleave”，函数如下所示

function headerClicked(headerObj) { 
       $(headerObj).parent().find('.contentList').slideDown(300);
} 
function headerClickedUp(headerObj) { 
       $(headerObj).parent().find('.contentList').slideUp(300);
}

别忘了加上

.contentList
{
    display:none;
}

添加到css以在加载页面时隐藏“”

将其用作下拉列表按如下方式重新排序

function headerClicked(headerObj) { 
       $(headerObj).parent().find('.contentList').slideDown(300);
} 
function headerClickedUp(headerObj) { 
       $(headerObj).parent().find('.contentList').slideUp(300);
}

---

只需使用css:hover来显示和隐藏孩子。顺便说一句，您不需要javascript即可：@Malk true，但如果他需要一些跨浏览器支持的动画，那么他需要使用javascript（对于IE9或更少的支持）。@Vucko，您可以用css做很多事情，因此“需要使用”可能是极端的。我并不是说CSS可以实现JS所能做到的一切，但它已经越来越接近了！但是，更好的是，当我执行此操作时，标题上的onMouseLeave将不允许我向下滚动到列表项。我是否在

标签上应用了鼠标左键？它只在页眉上工作…因此，当你从页眉离开鼠标时，它正在向上滑动，我想现在你可以得到你想要的结果了，按照这个操作