单击内部时jquery下拉菜单隐藏答案

【问题标题】：jquery dropdown hide when click inside单击内部时jquery下拉菜单隐藏
【发布时间】：2014-01-31 14:45:24
【问题描述】：

我是 jQuery 新手，所以也许这是一个简单的问题，但我直到现在还没有找到一个好的答案。也许我什至没有找到合适的关键字来搜索...

我有一个下拉登录表单。我在typo3中使用它。问题是：登录表单内的任何点击都会隐藏/切换下拉框。这是脚本：

<script type="text/javascript">
            $(function() {
                var button = $('#loginButton');
                var box = $('#loginBox');
                var form = $('#loginForm');
                button.removeAttr('href');
                button.mouseup(function(login) {
                    box.slideToggle();
                    button.toggleClass('active');
                });
                form.mouseup(function() {
                    return false;
                    });
                $(document).mouseup(function(login) {
                    if(!($(login.target).parents('#loginButton').length > 0)) {
                        button.removeClass('active');
                        box.hide();
                    }
                });
            });

        </script>

也许有人可以帮忙？提前致谢！

【问题讨论】：

你能提供一个 JSFiddle 吗？
嗨 tahnks 很多回答所以我在 jquery 中很新我试图提供一个 JSFiddle（如果错了，对不起。我的第一次！）
忘记链接了：jsfiddle.net/9bWDN
那些你在脚本中定义的ids loginButton, loginBox and loginForm 没有找到。

标签： jquery typo3 dropdownbox

【解决方案1】：

使用类似的东西：

    $('selector').mouseenter(function(){

    //do something when mouse is over
    }).mouseleave(function(){

    //do something when mouse out
    });

【讨论】：

【解决方案2】：

来自 jquery 文档：当鼠标指针悬停在元素上并释放鼠标按钮时，将向元素发送 mouseup 事件。

我猜：你想在这里使用点击事件处理程序吗？！

button.click(function() {
    box.slideToggle();
    button.toggleClass('active');
});

在这里，您将绑定到您的typo3 网站上发生的所有 mouseup 事件。包括loginForm上面的那些！！所以它会在任何 mouseup 上隐藏你的表单

$(document).mouseup(function(login) {
    if(!($(login.target).parents('#loginButton').length > 0)) {
        button.removeClass('active');
        box.hide();
    }
});

你可能想试试这个：

$(document).bind("mouseup",function(e){
    console.log(e.target)
})

e.target 会告诉你鼠标在哪个 div 上方被释放。你可能想检查这样的事情：

$(document).mouseup(function(login) {
   if(login.target.id == "loginForm"){return false}

    if(!($(login.target).parents('#loginButton').length > 0)) {
        button.removeClass('active');
        box.hide();
    }
});

祝你好运！

【讨论】：

感谢您的回答。我没有使用
button.removeClass('active'); box.hide();它有效