Nest LI功能

Question

我基本上得到了这个标记：

<div class="navBar">
  <div class="inner blueTheme"> 
    <ul id="" class="navBarMenu">
      <li class="xenonActiveMenu blue"><a href="/new_order">Orders</a>
        <ul>
          <li class="backBtn"><a href="#">&lt; Back</a>
          </li>
          <li class="xenonActiveMenu "><a href="/new_order">New Order</a>
          </li>
        </ul>
      </li>  
      <li class="green"><a href="/account_details">Profile</a>
        <ul>
          <li class="backBtn"><a href="#">Back</a>
          </li>
        </ul>
      </li>
      </ul>
  </div>      
</div>

Jquery：

$('.navBar .inner ul > li').bind('click', function(e){  
    e.preventDefault();
    item = $(this);
    if (item.attr('class') != 'selected' && item.attr('class') !='backBtn') {
        item.addClass('selected');
        var parent = item.parent();
        var barWidth = item.width();
        var hasSub = item.find('ul').length;
        if (hasSub > 0 ){
        //Item Does have a submenu
        parent.children().each(function(){
            $(this).animate({marginLeft: -barWidth}, 400);
        });
        }
    } else {
        var parent = $(this).parent().closest('li');
        var barWidth = $(this).width();
        parent.each(function(){
        $(this).animate({marginLeft: barWidth}, 400);
        });
    }
    });

我的问题是，它认为“li”元素已被点击两次，因为嵌套的LI元素有两个独立的函数，我只是不知道绕过它的方法，有人可以帮忙吗？

香农

Answer 1

使用stopPropagation，它的名字与其名称完全相同：它可以防止事件将DOM树冒泡到下一级<li>元素。

或者，您可以将处理程序分开以使代码更具可读性，第一级使用$('.navBar .inner > ul > li')，第二级使用$('.navBar .inner > ul > li ul li')。

使用stopPropagation的更新代码如下所示。

$('.navBar .inner ul > li').click( function(e) {  
    e.preventDefault();
    e.stopPropagation();

    // your code for handler
});