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);
    }
}

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

这是一个小提琴http://jsfiddle.net/fAKzw/

Answer 1

给li一个ID：

<li id="liScrollDown" class='has-sub' style="float: right">

然后做：

$("#liScrollDown").click(function() {
     LoginButtonClicked();
});

Answer 2

您需要从子菜单

停止点击事件传播

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

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

2 个答案: