加入JQuery脚本

时间:2009-08-26 18:35:07

标签: javascript jquery

我正在使用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>

5 个答案:

答案 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_menu2jq_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>

当网站上线时,我会发布一个链接,以便人们可以看到效果。