实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法

一、场景描述

如图，我要完成一个消息通知框，点击绿色对勾按钮之后会隐藏掉一条通知。

我先直接给绿色对勾按钮添加一个点击事件，由于使用bootstrap框架，所以用户在点击通知框中任何地方时，都会隐藏掉整个通知栏。

现在要求点击绿色对勾按钮后只隐藏该行通知，而不会隐藏整个通知框。

实现原理：其中涉及到javascript的事件冒泡机制，当我们触发了绿色对勾按钮的事件后，需要终止该事件在传播过程的捕获、目标处理或起泡阶段进一步传播。具体是调用stopPropagation()方法。

二、实例

html代码

<section class="dropdown-menu aside-xl animated fadeInUp">
    <section class="panel bg-white">
        <div class="panel-heading b-light bg-light">
            <strong>通知</strong>
        </div>
        <div class="list-group list-group-alt">
            <li id="0" class="media list-group-item" style="display: block;">
                <span class="pull-left thumb-sm text-center">
                    <a href="javascript:void(0)" onclick="setNoticeReaded(0)">
                        <i class="fa fa-check fa-2x text-success"></i>
                    </a>
                </span>
                <span class="media-body m-b-none">Sophi sent you a email<br>
                    <small class="text-muted">1 minutes ago</small>
                </span>
            </li>
            <li id="1" class="media list-group-item" style="display: block;">
                <span class="pull-left thumb-sm text-center">
                    <a href="javascript:void(0)" onclick="setNoticeReaded(1)">
                        <i class="fa fa-check fa-2x text-success"></i>
                    </a>
                </span>
                <span class="media-body m-b-none">Sophi sent you a email<br>
                    <small class="text-muted">1 minutes ago</small>
                </span>
            </li>
        </div>
        <div class="panel-footer text-sm">
            <a href="#">全部标记为已读</a>&nbsp;|&nbsp;
            <a href="notice.html">查看所有</a>
        </div>
    </section>
</section>

两种js实现：

实现方法一：

function setNoticeReaded(noticeId){
    $("#" + noticeId).slideUp();
    event.stopPropagation();
}

实现方法二：

$('.lia').click(function(e) {
        var li = $(".lia").parent().parent();
        li.slideUp();
        e.stopPropagation();
    });