javascript - 防止列表项内的div向上滑动

Question

在我的菜单中，我有一个带有登录字段的列表项:

                                 <li class='has-sub' onclick="LoginButtonClicked()" style="float: right">
                                     <a href='#' id="notificationList">
                                         <span>Log in2</span>

                                     </a>
                                     <ul class="loginBox" style="display: none; height: 300px; overflow-y: auto;">
                                         <li>
                                             <div id="Div1" style="background: #0fa1e0; padding: 4px;">

                                                 <input type="text" value="LoginName" />

                                                 <input type="text" value="Password" />
                                             </div>

                                         </li>
                                     </ul>
                                 </li>

当我点击 li 类 LoginButtonClicked 函数时被触发并且 ul 向下滑动:

var loginUserMenuChoosen = false;

function LoginButtonClicked() {
    console.log(loginUserMenuChoosen);
    if (loginUserMenuChoosen == false) {
        loginUserMenuChoosen = true;


        $('.loginBox').slideDown(200);


        //$('.masterPageNotifier').val("0");
    }
    else if (loginUserMenuChoosen == true) {
        loginUserMenuChoosen = false;
        $('.loginBox').slideUp(200);
    }
}

这里的问题是，当我在列表项中选择文本字段时，它也会一直向上滑动。我该如何防止这种情况？

这是一把 fiddle http://jsfiddle.net/fAKzw/

Answer 1

您需要停止子菜单的点击事件传播，

像这样给子菜单添加id

<ul id="subMenu" class="loginBox" style="display: none; height: 300px; overflow-y: auto;">

然后阻止事件传播

$("#subMenu").click(function(event) {
 event.stopPropagation();

});

修改 Darren Davies 代码，检查这个 http://jsfiddle.net/fAKzw/5/