9

I want to move the Div-element "nav", when a li-element was clicked.

I have a List in a 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>

Why doesnt this work in 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 );
});

我这样做了 $('body') 因为如果您动态生成这些 li，那么您需要在调用它们时绑定“委托事件”。

于 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 错误（如果您在此代码之前这样做，代码将不起作用），检查您的控制台（在 chrome 中右键单击 > 检查元素 > 控制台）。

这两个问题之一（很可能）会导致您的问题，否则您将不得不自己调试（或向我们展示更多代码）。

于 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 回答