嵌套的li-单击子项时，触发了父项单击事件[重复]答案

【问题标题】：nested li - on clicking child, parent click event triggered [duplicate]嵌套的li-单击子项时，触发了父项单击事件[重复]
【发布时间】：2014-05-12 00:30:17
【问题描述】：

我有一个嵌套的 li

<li class="innerMenuLi"><a href="#"><span>MainLi</span></a>
<ul class="mainMenu">
    <li><a href="#" class="active"><span>mainMenu1</span></a></li>
    <li><a href=""><span>mainMenu2</span></a></li>
    <li><a href=""><span>mainMenu3</span></a></li>
    <li><a href=""><span>mainMenu4</span></a></li>
    <li><a href=""><span>mainMenu4</span></a></li>
    <li class="secondInnerMenu"><a href="#"><span>mainMenu5</span></a>
        <ul class="analyticsMenu">
            <li><a href="">secondInnerMenu1</a></li>
            <li><a href="">secondInnerMenu2</a></li>
            <li><a href="">secondInnerMenu3</a></li>
            <li><a href="">secondInnerMenu4</a></li>
        </ul>
    </li>
</ul>

$('.innerMenuLi').children('.mainMenu').click(function(e){
    e.stopPropagation();
    showMenu($(this));
});
$('.innerMenuLi').click(function(e){
    showMainMenu($(this));
    e.stopPropagation();
});
function showMainMenu(el){
    if(!el.hasClass('open')){
        (el).addClass('open');
        (el).children('.mainMenu').show();
    }else{
        (el).removeClass('open');
        (el).children('.mainMenu').hide();
    }
}
function showMenu(el){
    if(!el.hasClass('open')){
        (el).addClass('open');
        (el).children('.analyticsMenu').show();
    }else{
        (el).removeClass('open');
        (el).children('.analyticsMenu').hide();
    }
}

我希望为父子 li 调用不同的函数。但是现在当点击子元素时会触发父元素。

提前致谢

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

// will prevent the event to bubble up the DOM and so avoid parent attached handlers to be triggered
e.stopPropagation();

由于两个菜单级别的结构相同，我宁愿将单个处理程序附加到顶部菜单容器并测试单击是否针对<a> 标记（后跟ul 元素），然后如果是的，像这样处理同级菜单：

/* Event delegation menu click */
$('#root').on('click', function(e){
    var $t = $(e.target).closest('a'),
        $ul = $t.nextAll('ul').eq(0);
    if($t.length && $ul.length){
        $ul.toggleClass('open').slideToggle();
    }
});

fiddle Here

【讨论】：