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

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，为什么不添加一个事件处理程序来在鼠标打开或离开标题时使用react？您可以使用 JQuery 的鼠标鼠标移开功能来执行此操作。

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

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

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