我正在使用JQuery创建一个水平手风琴菜单(基于Design Reviver的教程。我运行良好,但我需要在同一页面添加第二个水平手风琴菜单。我确信这可以完成,但我不知道如何调整head部分中的脚本以便两个菜单同时工作。我已经尝试了代码,但到目前为止没有运气。< / p>
菜单基于无序列表,第一个列表项具有id="a1"
的锚标记,因此可以告诉它开始时“打开”(而其他菜单项显示为“折叠” “)。
每个菜单都在一个包装div中,第一个包含class="jq_menu"
,第二个包含class="jq_menu2"
。
目前,我在页面的head部分中有以下代码。两个菜单都出现在页面上,但只有第一个菜单显示滑动动画。任何建议都非常感谢!谢谢。
<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>
答案 0 :(得分:1)
浏览器注册DOM时会触发ready()
函数。所以它只会被调用一次。摆脱第二块JavaScript,并在第一个块的$(document).ready()
函数中包含第二个菜单的代码。
答案 1 :(得分:0)
您可以使用map功能
['jq_menu', 'jq_menu2'].map(function(n){ $("." + n + " 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; } ); })
答案 2 :(得分:0)
感谢您的建议。基于mplusz的答案,我现在得到以下代码。目前,两个菜单都没有动画滑动动作。这可能是我的语法问题吗?否则,由于不同的div类(jq_menu2
和jq_menu
)和不同的变量名(lastBlock,lastBlockB等),我不知道如何组合悬停函数。
<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;
var lastBlockB = $("#a2");
var maxWidthB = 180;
var minWidthB = 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;
}
);
}
$(".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>
答案 3 :(得分:0)
[编辑] 我认为你的主要问题可能是你只有一半的悬停功能。 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*/ }
);
当你将lastBlock声明为jQuery对象时:
var lastBlock = $("#a1");
稍后您无需在jQuery选择器中调用它。
<强>为强>
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
不可强>
lastBlock.animate({width: minWidth+"px"}, { queue:false, duration:200 });
答案 4 :(得分:0)
非常感谢所有帮助过我的人。当我为mouseoff添加第二个参数时,我的图像菜单都开始滑动,并且每个菜单中的一个图像始终保持打开 - 就像我想要的那样!
(有趣的是,当我从$(lastBlock).animate等中删除jQuery选择器时,它破坏了功能。不知道为什么会这样,但非常高兴它仍在使用选择器。)
我已经包含了下面的最终代码,以防它帮助其他人:)
<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;
var lastBlockB = $(“#a2”);
$(".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>
当网站上线时,我会发布一个链接,以便人们可以看到效果。