0

我对 jQuery 世界完全陌生。我正在尝试为 div 中的不同li元素的单击事件设置动画样式menu。

请首先概述我的代码，以便我可以向您解释我的问题。

HTML 代码：

<div id="container">

<div id="outer_div">
<div id="image_div"></div>
<div id="menu">
<ul id="nav">
    <li id="nav1"><a href="">News & Events</a></li>
    <li id="nav2"><a href="">Facilities</a></li>
    <li id="nav3"><a href="">Research</a></li>
    <li id="nav4"><a href="">Programmes</a></li>
    <li id="nav5"><a href="">Faculty</a></li>
</ul>
</div>
<div id="popup_menu">
     <ul>
     <li><a href="">abc</a></li>
   <li><a href="">abc</a></li>
   <li><a href="">abc</a></li>
   <li><a href="">abc</a></li>
   </ul>
</div>
</div>
</div>

我的 jQuery 代码是：

$(window).load(function(){

$("#popup_menu").fadeIn()
.css({left:-300,position:'absolute',opacity:0})
.animate({left:0,opacity:1.0}, 1000, function() {
//callback
});
});

$("nav1").click(function(){
$("#popup_menu").fadeIn()
.css({left:-300,position:'absolute',opacity:0})
.animate({left:0,opacity:1.0}, 1000, function() {
//callback });

$("nav2").click(function(){
$("#popup_menu").fadeIn()
.css({left:-300,position:'absolute',opacity:0})
.animate({left:0,opacity:1.0}, 1000, function() {
//callback});

 $("nav3").click(function(){
$("#popup_menu").fadeIn()
.css({top:-300,position:'absolute',opacity:0})
.animate({top:0,opacity:1.0}, 1000, function() {
//callback});

$("nav4").click(function(){
$("#popup_menu").fadeIn()
.css({right:-300,position:'absolute',opacity:0})
.animate({right:0,opacity:1.0}, 1000, function() {

$("popup_div").css(right:0);
$("#image_div").css({left:0,top:0});  });

$("nav5").click(function(){
$("#popup_menu").fadeIn()
.css({right:-300,position:'absolute',opacity:0})
.animate({right:0,opacity:1.0}, 1000, function() {
//callback });
});

我在这里面临的问题是，对于所有li元素，都会调用 click 事件处理程序$("nav1").click(function()。只有当我注释掉 nav2、nav3、nav4、nav5 的所有其他点击事件时才会调用它。

其次，如果我删除注释，即上述编写的代码，我的 jquery 代码不会被执行。

谁能告诉我我错在哪里？我希望我的问题很清楚......谢谢。

4

3 回答 3

2

您nav1错误地引用了元素，需要一个井号 (#) 来表示它们是一个 ID：

$("#nav1").click(function(){...
于 2012-09-27T16:40:30.290 回答
2

你没有关闭你的$("#nav[number]").click(function(){功能。你需要}在最后。 

$("#nav1").click(function(){
    $("#popup_menu").fadeIn()
    .css({left:-300,position:'absolute',opacity:0})
    .animate({left:0,opacity:1.0}, 1000, function() {
    //callback });
}  <-----

$("#nav2").click(function(){
    $("#popup_menu").fadeIn()
    .css({left:-300,position:'absolute',opacity:0})
    .animate({left:0,opacity:1.0}, 1000, function() {
    //callback});
}  <-----

etc...

你还需要用'#'引用id，例如$("#nav2").click...

于 2012-09-27T16:41:59.103 回答
0

经过这里人们提到的许多更正后，我在这里和那里搜索了几个小时，终于找到了解决方案。正如我在上面的代码中所写：

 $("#nav2").click(function(){
    $("#popup_menu").fadeIn()
    .css({left:-300,position:'absolute',opacity:0})
    .animate({left:0,opacity:1.0}, 1000, function() {
    //callback });
    }

有两个错误；

1-nav2未检测到 ID 并且从未执行过执行事件。

li2 - 不会在任何元素上调用此单击事件，因为它没有附加任何事件。我需要为各个li元素附加一个“实时点击事件”。

所以最后的解决方案是：

$("#nav li[id='nav2']").live('click', function(e) {
      e.preventDefault();
    $("#popup_menu").fadeIn()
.css({left:'-300px',position:'absolute',opacity:0})
.animate({left:'0px',opacity:1.0}, 1000, function() {

});
});
于 2012-09-27T22:34:13.297 回答