Question

我正试图在内容标题上进行简单的折叠，该标题下面有列表项。目前我正在使用的JavaScript设置为onClick。我想将其更改为mouseOver（扩展）和mouseOut（返回崩溃）。 Here is the 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);
}

Answer 1

我看到你正在使用JQuery，为什么不添加一个事件处理程序来响应鼠标开启或离开标题？您可以使用JQuery中的鼠标mouseout功能执行此操作。

当鼠标离开

时，您可以编写类似这样的内容

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

文档位于http://api.jquery.com/mouseenter/和http://api.jquery.com/mouseout/

Answer 2

您的问题有很多解决方案。例如，它可以使用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/

鼠标移出鼠标。悬停时折叠内容标题

2 个答案: