0

私はjQueryの世界にまったく慣れていません。lidiv内のさまざまな要素のクリック イベントで div のアニメーション スタイルを設定しようとしています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要素に対してクリック イベント ハンドラー$("nav1").click(function()が呼び出されることです。また、nav2、nav3、nav4、nav5 の他のすべてのクリック イベントをコメントアウトした場合にのみ呼び出されます。

次に、コメント、つまり上記のコードを削除すると、jquery コードが実行されません。

どこが間違っているのか誰か教えてもらえますか? 私の質問が明確であることを願っています...ありがとう。

4

3 に答える 3

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 に答える
2

要素を正しく参照していませんnav1。ID であることを示すためにハッシュ記号 (#) が必要です。

$("#nav1").click(function(){...
于 2012-09-27T16:40:30.290 に答える
0

ここの人々が言及したように多くの修正を加えた後、私はあちこちを何時間も検索し、最終的に解決策を得ました。上記のコードで書いたように：

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

間違いが 2 つあります。

1- IDnav2が検出されず、do イベントが実行されませんでした。

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 に答える