jQuery: почему мое событие click на элементе li не работает?

Я хочу переместить Div-элемент "nav", когда был нажат li-элемент.

у меня есть список в 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 );
});
8
html-lists jquery jquery-animate

4 ответов

код работает нормально, как вы ожидаете, просмотрите 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 щелкните правой кнопкой мыши > проверить элемент > консоль).

один из эти 2 проблемы вызывают ваши проблемы (скорее всего), иначе вам придется отлаживать его самостоятельно (или показать нам больше кода).

6

в зависимости от того, какую версию Jquery вы используете, это может работать или не работать:

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

Я сделал $('body'), потому что если вы генерируете эти li динамически, вам нужно связать "делегированные события", как они называются.

5

он работает так, как ожидалось, но вы должны нажать на li-element. Если вы нажмете на якорь, он может сломаться в некоторых браузерах.

вот лучший подход к этому.

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/

0

попробуйте этот, и я думаю, что в вашем коде также нет ошибки.

насколько мне известно, ваш код будет работать, если вы дадите поплавок:слева собственность за #nav.

Если вы устанавливаете позиция тогда будет работать следующий код.

$(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");
 });
});
0