Question

当点击li元素时，我想移动Div元素“nav”。

我在div中有一个List

<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 );
});

Answer 1

根据您使用的Jquery版本，这可能有效，也可能无效：

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

我做了$（'body'），因为如果你动态地生成这些li，那么你需要在被调用时绑定'委托事件'。

Answer 2

代码可以正常运行，查看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中右键单击＆gt;检查元素＆gt;控制台）。

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

Answer 3

它按预期工作，但您必须单击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/

Answer 4

试试这个，我认为你的代码也没有错误。

据我所知，如果您为 #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");
 });
});

jQuery：为什么li元素上的click事件不起作用？

4 个答案: