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>

Jクエリ:

$('.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 要素には 2 つの別々の関数があるため、「li」要素が 2 回クリックされたと考えていることです。回避方法がわかりません。誰か助けてください。

シャノン

4

1 に答える 1

1

を使用stopPropagationします。これは、その名前が示すとおりに機能します。これにより、イベントがDOMツリーを次のレベルの<li>要素にバブリングするのを防ぎます。

$('.navBar .inner > ul > li')または、ハンドラーを分離して、第1レベルと第2レベルに使用して、コードをもう少し読みやすくすることもできます$('.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 に答える