把鼠标移过去，然后把鼠标移出去.悬停时折叠内容标头

mouse over and mouse out. Collapse content header when hovering

本文关键字：鼠标 折叠 过去 然后 移出 悬停      更新时间：2023-09-26

我正在尝试对下面有列表项的内容标头进行简单的折叠。目前我使用的JavaScript设置为onClick。我想将其更改为mouseOver（展开）和mouseOut（返回折叠）。这是JSfiddle。

我对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中的鼠标mouseout函数来完成此操作。

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

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

文档在这里http://api.jquery.com/mouseenter/和http://api.jquery.com/mouseout/

您的问题有很多解决方案。例如，使用jQuery悬停可以轻松处理http://api.jquery.com/hover/。但对于这段时间，最简单的解决方案可以是以下一个。。。

http://jsfiddle.net/r486Y/

在这里，我没有使用"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以在加载页面时隐藏"。

要将其用作下拉列表请按以下顺序重新排序。。。

http://jsfiddle.net/69gNB/

相关文章：