JQuery Расширение Nav Сворачивание на ребенка Нажмите

Question

https://jsfiddle.net/aesya0g6/

Здравствуйте!

Я построил расширяющийся навигатор, и он работает точно так, как я хочу, за исключением того факта, что он рушится на щелчке детей. Я попытался переключиться туда, где указывает jQuery, в надежде, что это разрешит его, но не повезло. Где я иду не так?

$('.expandingNav').click(function(){ 
    if($(this).hasClass('expanded')){ 
    $(this).children('.hidden').slideUp(); 
    $(this).removeClass('expanded'); 
    } 
    else{ 
    $(this).children('.hidden').slideDown(); 
    $(this).addClass('expanded'); 
    } 
}); 

Answer 1

При нажатии на ребенке нужного элемента, событие щелчка «пузырится» его родитель, таким образом, инициирующее событие щелчка, который вызывает слайд вверх. Вы должны обработать событие click для детей и использовать stopPropagation, чтобы избежать пузырьков событий. Попробуйте что-то вроде этого:

$('.expandingNav li').click(function(ev) { ev.stopPropagation(); }) 

Answer 2

Вы можете проверить, если ближайший ul элемент имеет родительский элемент nav.sidebar:

$('.expandingNav').on('click', function (e) { 
    if ($(e.target).closest('ul').parent('nav.sidebar').length) { 
     // ... 
    } 
}); 

Updated Example

$('.expandingNav').on('click', function (e) { 
    if ($(e.target).closest('ul').parent('nav.sidebar').length) { 
     if ($(this).hasClass('expanded')) { 
      $(this).children('.hidden').slideUp(); 
      $(this).removeClass('expanded'); 
     } else { 
      $(this).children('.hidden').slideDown(); 
      $(this).addClass('expanded'); 
     } 
    } 
}); 

---

В качестве альтернативы, вы также можете проверить увидеть, если следующий брат родительского элемента является ul элемент:

$('.expandingNav').on('click', function (e) { 
    if ($(e.target).parent().next('ul').length) { 
     // ... 
    } 
}); 

Updated Example

$('.expandingNav').on('click', function (e) { 
    if ($(e.target).parent().next('ul').length) { 
     if ($(this).hasClass('expanded')) { 
      $(this).children('.hidden').slideUp(); 
      $(this).removeClass('expanded'); 
     } else { 
      $(this).children('.hidden').slideDown(); 
      $(this).addClass('expanded'); 
     } 
    } 
}); 

Answer 3

Вы shuold Избегайте распространения ничего Внутри элемента вы щелкните здесь, в этом случае его li внутри класса expandingNav.

$("li.expandingNav").on('click', function(e) { 
    if($(this).hasClass('expanded')){ 
    $(this).children('.hidden').slideUp(); 
    $(this).removeClass('expanded'); 
    } 
    else{ 
    $(this).children('.hidden').slideDown(); 
    $(this).addClass('expanded'); 
    } 
    }); 
//On sub LI click , stop propagating. 
$("li.expandingNav li").on('click', function(e) { 
e.stopPropagation(); 
}); 

Working Fiddle

Answer 4

не утруждая себя запутанными дополнительные коды.

просто положил слушателя на бирку.

так:

$('.expandingNav').children('a').click(function(){ 
    var element = $(this).parent(); 
    if($(element).hasClass('expanded')){ 
    $(element).children('.hidden').slideUp(); 
    $(element).removeClass('expanded'); 
    } 
    else{ 
    $(element).children('.hidden').slideDown(); 
    $(element).addClass('expanded'); 
    } 
}); 

Answer 5

Вы могли бы просто достичь его, добавив:

//If the e.target is the same element as this, you've not clicked on a descendant. 
if(e.target !== this) return; 

updated fiddle