1

我基本上有这个标记：

<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>

查询：

$('.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 元素有两个单独的函数，我只是不知道解决方法，有人可以帮忙吗？

香农

4

1 回答 1

1

Use 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
});
于 2013-01-16T02:30:35.763 回答