Question

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

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

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代码。

谁能告诉我在哪里弄错了？我希望我的问题很明确......谢谢。

Answer 1

您正在错误地引用nav1元素，需要一个哈希符号（＃）来表示它们是一个ID：

$("#nav1").click(function(){...

Answer 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...

Answer 3

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

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

有两个错误;

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

2 - 未在任何li元素上调用此click事件，因为没有附加任何事件。我需要附加一个＆＃34;实时点击事件＆＃34;个人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() {

});
});

click事件适用于所有li元素或不适用于li元素

3 个答案: