jQuery扩展导航在儿童点击时折叠

Question

https://jsfiddle.net/aesya0g6/

Hello!

I have built an expanding nav, and it is running exactly how I want, except for the fact that it is collapsing on the click of the children. I have tried switching where the jQuery is pointing, in hopes that this would resolve it, but have had no luck. Where am I going wrong?

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

Answer 1

You could check to see if the closest ul element has a parent element of 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');
        }
    }
});

---

Alternatively, you could also check to see if the parent element's next sibling is a ul element:

$('.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 2

You could simple achieve it by adding:

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

updated fiddle

Answer 3

When you click on an item's child the click event "bubbles up" to its parent thus triggering the click event which causes the slide up. You should handle the click event on the children and use stopPropagation to avoid event bubbling. Try something like this:

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

Answer 4

You shuold Avoid propagation anything Inside the element you click here in this case its li inside class 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 5

dont bother yourself with confusing extra codes.

just put the listener on the a tag.

like this:

  $('.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');
  }
});