Javascript 加入JQuery脚本

我正在使用JQuery创建一个水平的手风琴菜单（基于上的教程。我有它工作得很好，但我需要添加第二个水平手风琴菜单，就像它一样到同一页。我相信这是可以做到的，但我不知道如何调整头部部分的脚本，使两个菜单同时工作。我已经尝试了代码，但到目前为止没有运气

菜单以无序列表为基础，第一个列表项有一个带有

id=“a1”

的锚定标记，因此可以告诉它以“打开”开始（而其他菜单项显示为“折叠”）

每个菜单都在一个包装器div中，第一个有

class=“jq\u menu”

，第二个有

class=“jq\u menu2”

目前，我在我的页面的标题部分有以下代码。两个菜单都出现在页面上，但只有第一个菜单的滑动动画工作。任何建议都非常感谢！谢谢

<script src="javascript/jquery-1.2.3.js"
type="text/javascript"></script>

<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;  

$(".jq_menu ul li a").hover(
  function(){
    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
  }
);

});

</script>

<script type="text/javascript" >
$(document).ready(function(){
var lastBlockB = $("#a2");
var maxWidthB = 180;
var minWidthB = 60; 

$(".jq_menu2 ul li a").hover(
  function(){
    $(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
lastBlockB = this;
  }
);

});

</script>

$（文档）.ready（函数（）{
var lastBlock=$（“#a1”）；
var maxWidth=180；
var minWidth=60；
$（“.jq_菜单ul li a”）。悬停(
函数（）{
$（lastBlock）.animate（{width:minWidth+“px”}，{queue:false，duration:200}）；
$（this.animate（{width:maxWidth+“px”}，{queue:false，duration:200}）；
lastBlock=此；
}
);
});
$（文档）.ready（函数（）{
var lastBlockB=$（“#a2”）；
var maxWidthB=180；
var minWidthB=60；
$（“.jq_menu2 ul li a”）。悬停(
函数（）{
$（lastBlockB）.animate（{width:minWidthB+“px”}，{queue:false，duration:200}）；
$（this.animate（{width:maxWidthB+“px”}，{queue:false，duration:200}）；
lastBlockB=此；
}
);
});

您可以使用该功能

['jq_菜单'，'jq_菜单2'].map（函数（n）{ $（“+n+”ul li a”）。悬停( 函数（）{ $（lastBlockB）.animate（{width:minWidthB+“px”}，{queue:false，duration:200}）； $（this.animate（{width:maxWidthB+“px”}，{queue:false，duration:200}）； lastBlockB=此； } ); })

---

当浏览器注册DOM时，

ready（）

函数会触发。因此它只会被调用一次。请去掉第二块JavaScript，并将第二个菜单的代码包含在

$（document.ready（）中

第一个块的函数。

谢谢你的建议。根据mplusz的回答，我现在得到了以下代码。目前，两个菜单都没有动画滑动动作。这可能是我的语法问题吗？否则，由于不同的div类，我不知道如何组合悬停函数（

jq_菜单2

和

jq_菜单

）以及不同的变量名（lastBlock、lastBlockB等）

$（文档）.ready（函数（）{
var lastBlock=$（“#a1”）；
var maxWidth=180；
var minWidth=60；
var lastBlockB=$（“#a2”）；
var maxWidthB=180；
var minWidthB=60；
$（“.jq_菜单ul li a”）。悬停(
函数（）{
$（lastBlock）.animate（{width:minWidth+“px”}，{queue:false，duration:200}）；
$（this.animate（{width:maxWidth+“px”}，{queue:false，duration:200}）；
lastBlock=此；
}
);
}
$（“.jq_menu2 ul li a”）。悬停(
函数（）{
$（lastBlockB）.animate（{width:minWidthB+“px”}，{queue:false，duration:200}）；
$（this.animate（{width:maxWidthB+“px”}，{queue:false，duration:200}）；
lastBlockB=此；
}
);
});

[编辑] 我认为你的主要问题可能是你只有一半的hover函数，hover函数有两个参数，mouseon和mouseoff

$(thing).hover(
      function(){ /*do this when they hover over*/ }, //<---- don't forget that comma
      function(){ /*do this when they remove their mouse*/ }
);

以后不需要在jQuery选择器中调用它

坏的

$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });

lastBlock.animate({width: minWidth+"px"}, { queue:false, duration:200 });

好

$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });

lastBlock.animate({width: minWidth+"px"}, { queue:false, duration:200 });

---

非常感谢所有在这里帮助我的人。当我为mouseoff添加第二个参数时，我的两个图像菜单都开始滑动，并且每个菜单中都有一个图像始终保持打开状态-正如我所希望的那样

（有趣的是，当我从$（lastBlock）.animate等中删除jQuery选择器时，它破坏了该功能。不知道为什么会这样，但很高兴它仍然可以使用选择器。）

我在下面加入了最后一段代码，以防它对其他人有所帮助：）

$（文档）.ready（函数（）{
var lastBlock=$（“#a1”）；
var maxWidth=180；
var minWidth=60；

var lastBlockB=$（“#a2”）

$（“.jq\u菜单ul li a”）。悬停(
函数（）{
$（lastBlock）.animate（{width:minWidth+“px”}，{queue:false，duration:200}）；
$（this.animate（{width:maxWidth+“px”}，{queue:false，duration:200}）；
lastBlock=此；
}, 
函数（）{/*在移除鼠标时执行此操作*/}
);
$（“.jq_menu2 ul li a”）。悬停(
函数（）{
$（lastBlockB）.animate（{width:minWidth+“px”}，{queue:false，duration:200}）；
$（this.animate（{width:maxWidth+“px”}，{queue:false，duration:200}）；
lastBlockB=此；
}, 
函数（）{/*在移除鼠标时执行此操作*/}
);
});

---

网站上线后，我将发布一个链接，以便人们可以看到效果。

谢谢你的帮助。我尝试使用此代码，但现在两个菜单都没有滑动动作。我最初在第二组变量的名称中添加了字母B，因为我认为它们必须与第一组不同-我不确定如何使用使用map函数计算lastBlock和lastBlockB等，但可能我误解了如何实现代码？哦，很抱歉，我在你的帖子中浏览了这一部分。mplusz的建议看起来非常可靠。既然你将lastBlock声明为jquery对象，你就不需要将其放入$（）在您的悬停函数中。只需将其命名为lastBlock.animate（{….}）；谢谢您的帮助-我知道这有什么意义！检查括号。下面的代码中的@line 18似乎太多了。

lastBlock.animate({width: minWidth+"px"}, { queue:false, duration:200 });

<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60; 

$(".jq_menu ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
}, 
function(){ /*do this when they remove their mouse*/ }

);

$(".jq_menu2 ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlockB = this;
}, 
function(){ /*do this when they remove their mouse*/ }
);

});

</script>