Question

我在一个页面的行中有三个div，例如类.class1，.class2，.class3。

当用户鼠标进入任何一个div我要显示其他div（divA＆amp; divB）时，问题是我可以在函数中有多个div吗？

这是我到目前为止所拥有的一个有效的div：

$(document).ready(function(){
$("body").on("mouseenter", ".class1", function ()
{
$(this).children(".divA").slideDown();
$(this).children(".divB").slideDown();
});

$("body").on("mouseleave", ".class1", function ()
{
$(this).children(".divA").slideUp();
$(this).children(".divB").slideUp();
});
});

如果用户输入.class1，.class2或.class3

，我希望效果发生

没有类似的功能三次

我试过.class1＆amp;＆amp; .class2等，但没有快乐，也.class1 || .class2等但也没有快乐

这可能吗？

Answer 1

你可以简单地做

$(document).ready(function(){
$("body").on("mouseenter", ".class1, .class2, .class3", function ()
{
$(this).children(".divA").slideDown();
$(this).children(".divB").slideDown();
});

$("body").on("mouseleave", ".class1, .class2, .class3", function ()
{
$(this).children(".divA").slideUp();
$(this).children(".divB").slideUp();
});
});

Answer 2

在jQuery中，您可以将选择器与,分开，因此在您的情况下可以使用".class1, .class2"之类的内容。

然后，jQuery将查找与这些选择器中的一个或多个匹配的元素。

<强>更新

您可以通过将两个事件绑定到同一个回调来缩短代码，然后使用slideToggle()代替：

$(function() {
   $("body").on("mouseenter mouseleave", ".class1, .class2, .class3", function ()
   {
       $(this).children(".divA, .divB").slideToggle();
   });
});

没有尝试过，但这在功能方面应该与您的代码相同。稍微短一些。

Mouseenter / mouseleave多个div

2 个答案: