jQuery конфликт вложенной анимации

0

Я создал простой многоуровневый push-меню со следующим кодом:

HTML

<li class="mobile_main_menu_headers">
  <h3 class='expand'>Top</h3>
  <ul class="mobile_main_menu_sub">
     <li class="mobile_main_menu_sub_back">Back</li>
     <li><a href="">Sub</a></li>
     <li><a href="">Sub</a></li>
     <li><a href="">Sub</a></li>
  </ul>
</li>

JQuery

$(".mobile_main_menu_headers").click(function(){               
    $(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});

$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
});

Проблема заключается в том, что при нажатии .mobile_main_menu_sub_back анимация идет left: 100% но затем сразу же возвращается left: 0px впоследствии. Я создал простой jsfiddle, который вы можете посмотреть здесь:

http://jsfiddle.net/M8N6f/

Нажмите верхний текст, чтобы увидеть слайд анимации влево. Затем нажмите " Назад", чтобы увидеть проблему.

Я просто хочу кнопку " Назад", чтобы оживить улицу справа, что она.

благодаря

  • 1
    Когда вы нажимаете Back, это часть .mobile_main_menu_headers, поэтому она запускает вашу первую функцию, поэтому она возвращается снова. Смотрите мой ответ ниже.
Теги:
animation

3 ответа

1
Лучший ответ

Попробуйте ниже:

$(".expand").click(function(){             
    $('.mobile_main_menu_sub').animate({left:'0px'});
});

$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
});

ДЕМО ЗДЕСЬ Я обновил ваш код и сделал его простым, почему вы так пишете? По определенной причине или другим функциям, которые вы здесь не указали?

EDIT: если у вас есть несколько элементов меню Обновлено DEMO

$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
    event.stopPropagation(); //Add this line;
});
Поделиться
  • 0
    Спасибо за помощь, отлично работает :) Что значит "писать это так?" Имена классов или алгоритм? Хаха, если это алгоритм, я думаю, что я так устал, что не могу больше рассуждать правильно: p
  • 0
    Я приму ваш ответ через несколько минут, как только ТАК позволит мне :)
Показать ещё 6 комментариев
2

Вы можете просто остановить распространение события от пузырьков вверх, вернув false из обработчика события на задней панели li:

$(".mobile_main_menu_headers").click(function(){               
    $(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});

$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
    return false;
});

ПРИМЕР

Кроме того, у jQuery есть функция, которая выполняет именно это событие.stopPropagation():

Предотвращает событие из пузырьков дерева DOM, предотвращая уведомление родительских обработчиков о событии.

$(".mobile_main_menu_headers").click(function(){               
    $(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});

$('.mobile_main_menu_sub_back').click(function(e){
    $(this).parent('ul').animate({left:'100%'});
    e.stopPropagation();
});

ПРИМЕР

Вы можете прочитать больше о событиях Событие распространения, бурлит и более здесь.

Поделиться
0

Проблема в том, что ваш код не работает:

Вы связали событие click с.mobile_main_menu_headers, которое содержит <li>. Поэтому, когда вы нажимаете обратную ссылку в <li> даже родительском .mobile_main_menu_headers щелчок также запускается. т.е. событие пузырится вверх

Вы можете решить эту проблему следующими способами:

удалите событие click из контейнера.mobile_main_menu_headers и привяжите его к элементу.expand.

$(".expand").click(function(){             
            $('.mobile_main_menu_sub').animate({left:'0px'});
        });

stopEventPropogation, в событии click.mobile_main_menu_sub_back.

$('.mobile_main_menu_sub_back').click(function(e){
    e.stopImmediatePropagation();
    $(this).parent('ul').animate({left:'100%'});
});

или

$('.mobile_main_menu_sub_back').click(function(e){
    $(this).parent('ul').animate({left:'100%'});
    e.stopPropagation();
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню