Question

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

Answer 1

浏览器注册DOM时会触发ready()函数。所以它只会被调用一次。摆脱第二块JavaScript，并在第一个块的$(document).ready()函数中包含第二个菜单的代码。

Answer 2

您可以使用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;
        }
    );
})

Answer 3

感谢您的建议。基于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>

Answer 4

[编辑] 我认为你的主要问题可能是你只有一半的悬停功能。 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 });

Answer 5

非常感谢所有帮助过我的人。当我为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>

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

加入JQuery脚本

5 个答案: