1

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

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

4

2 回答 2

1

给出li一个 ID：

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

然后做：

$("#liScrollDown").click(function() {
     LoginButtonClicked();
});
于 2013-04-28T11:07:24.367 回答
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/

于 2013-04-28T11:41:25.280 回答