9

li要素がクリックされたときに、div要素「nav」を移動したい。

divにリストがあります

<div id="nav">
    <ul>
        <li><a href="#t1">Flyer</a></li>
        <li><a href="#t2">Code</a></li>
        <li><a href="#t3">Angebot</a></li>
        <li><a href="#t4">Bilder</a></li>
    </ul>
</div>

これがjqueryで機能しないのはなぜですか：

$("#nav ul li").click(function(){
    $("#nav").animate({ 
        marginLeft: "-300px",
    }, 1000 );
});
4

4 に答える 4

12

使用している Jquery のバージョンによっては、これが機能する場合と機能しない場合があります。

$('body').on('click', '#nav ul li', function(){
    $("#nav").animate({ 
        marginLeft: "-300px",
    }, 1000 );
});

これらのliを動的に生成している場合、呼び出されたときに「委任されたイベント」をバインドする必要があるため、 $('body') を実行しました。

于 2013-07-11T12:32:48.717 に答える
6

コードは期待どおりに正常に動作します。 JSFiddleを参照してください。

jQuery DOM Ready イベントに入れるなど、忘れているような気がします。

コードが次のようになっていることを確認してください (DOM Ready 内)。

$(document).ready(function(){ // When the DOM is Ready, then bind the click
    $("#nav ul li").click(function(){
        $("#nav").animate({ 
            marginLeft: "-300px",
        }, 1000 );
    });
});

ページに他の JavaScript エラーがないことを確認します (このコードの前に行うと、コードは機能しません)。コンソールを確認します (クロムで右クリック > 要素の検査 > コンソール)。

これら 2 つの問題のいずれかが問題を引き起こしています (ほとんどの場合)。それ以外の場合は、自分でデバッグする必要があります (または、より多くのコードを提示してください)。

于 2013-07-11T12:36:11.043 に答える
0

期待どおりに動作しますが、li 要素をクリックする必要があります。アンカーをクリックすると、ブラウザによっては壊れることがあります。

これについては、より良いアプローチがあります。

HTML

<div id="nav">
 <ul>
 <li><a href="#t1">Flyer</a></li>
 <li><a href="#t2">Code</a></li>
 <li><a href="#t3">Angebot</a></li>
 <li><a href="#t4">Bilder</a></li>
 </ul></div>

jQuery

(function($) {
    var nav = $('#nav');

    nav.find('a').on('click',function(e){
        e.preventDefault();
        nav.animate({ 
            marginLeft: "-300px",
        }, 1000 );
    });
})(jQuery);

そしてもちろん、フィドル: http://jsfiddle.net/dKPqJ/

于 2013-07-11T12:32:15.700 に答える
0

これを試してみてください。あなたのコードにもエラーはないと思います。

私の知る限り、#navにfloat:leftプロパティを指定すると、コードが機能します。

位置を設定すると、次のコードが機能します。

$(document).ready(function(){
 $("#nav ul li").click(function()
 {
    $("#nav").animate({ 
     left: "-=300px",
    }, 1000 );
 });
});

または、これを試してください

$(document).ready(function(){
 $("#nav ul li").click(function()
 {
   $("#nav").animate({
       "left": "-=300px"
    },
  "slow");
 });
});
于 2013-07-11T12:36:06.590 に答える