0

我在菜单中有一堆不同的 DIV，它们会影响不同的事物，但它们都通过“数字”相关联。当我将它们全部分开但所有 For 和 While 循环尝试都失败时，它工作得很好......悬停在“$（document）.ready（function（）{}）;”期间应用......

我只是想在这里清理代码并更改它：

$("#slideMenu1").hover(function () {
  $("#slideMenu1Box").slideToggle("fast");
});

$("#slideMenu2").hover(function () {
  $("#slideMenu2Box").slideToggle("fast");
});

$("#slideMenu3").hover(function () {
  $("#slideMenu3Box").slideToggle("fast");
});

$("#slideMenu4").hover(function () {
  $("#slideMenu4Box").slideToggle("fast");
});

类似于：

for(var i = 1; i < 5; i++) {    
$("#slideMenu"+i).hover(function () {
  $("#slideMenu"+i+"Box").slideToggle("fast");
});
}

但我不能把它拉下来。是否可以？任何的想法？

4

4 回答 4

3

我会这样做的方式是使用类选择器或另一个选择器。 

 $(".slideMenu").hover(function() {
   $(".slideMenuBox", this).slideToggle("fast")
 });
 .slideMenu{
   display:block;
   height:20px;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideMenu1" class="slideMenu">
  <div id="slideMenuBox1" class="slideMenuBox">
    Menu1
  </div>
</div>
<div id="slideMenu2" class="slideMenu">
  <div id="slideMenuBox2" class="slideMenuBox">
    Menu2
  </div>
</div>

于 2012-07-25T20:08:57.163 回答
2

我建议你给你所有的幻灯片菜单一个名为“slidemenu”的类，然后像这样引用它们：

$(".slideMenu").hover(...);
于 2012-07-25T20:07:17.933 回答
2

这是可能的，我建议利用事件委托，这样你就没有大量的事件处理程序：

$("#someAncestor").on("mouseenter mouseleave", "[id^=slideMenu]", function () {
    $("#" + this.id + "Box").slideToggle("fast");
});

您可以通过使用通用类名来简化它，并且如果您显示您的标记，将有一种方法可以获取对适当...Box元素的引用，而无需通过 ID 找到它。

一些参考资料：

还要注意 和 的mouseenter使用mouseleave。您当前使用的.hover()方法只是它们的简写，但您不能将它与 一起使用.on()，因此需要显式绑定到两者。

于 2012-07-25T20:08:42.880 回答
0

你可以为这些元素添加一个公共类吗？

它应该看起来像这样：

<html>
    <div class="slideMenu" option="1">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="2">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="3">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="4">
        <div class="slideMenuBox"></div>
    </div>
    <div class="slideMenu" option="5">
        <div class="slideMenuBox"></div>
    </div>
</html>

然后您可以将您的事件处理程序应用于所有这些：

$(".slideMenu").hover( 
    function()
    {
        $(".slideMenuBox", this).slideToggle("fast");
    }
);

如果需要，您仍然可以单独引用它们：

$(".slideMenu[option='1']")
于 2012-07-25T20:17:09.063 回答