Question

我有一个简单的jQuery函数：

$(function() {
    $('div.dropdown-menu').click(function() {
        var $this = $(this);
        $this.toggleClass('active');
        $('.menu').toggle();
    });
});

这非常好用，显示并隐藏了下拉菜单.menu目前只是一个带列表按钮的无序列表。

但是我想在某个页面的下拉菜单中添加一个登录表单，但是点击这种形式的输入字段将导致菜单关闭（隐藏）。

如何更改代码以防止此行为

Answer 1

您可以使用event.target引用点击的元素，并使用is()方法检查它是否为表单字段：

$(function() {
    $('div.dropdown-menu').click(function(event) {
        if ($(event.target).is(":input")) {
            return;
        }
        $(this).toggleClass('active');
        $('.menu').toggle();
    });
});

Answer 2

您可以在输入字段上使用.stopPropagation() event.stopPropagation()，这可以防止点击冒泡到父元素。

Answer 3

试试这个：

 $('#input_field').click(function(){ return false; })

Answer 4

试试这个

$(function() {
    $('div.dropdown-menu').click(function(e) {
        if ($(e.target).is(":input")) {
            return false;
        }
        $(this).toggleClass('active');
        $('.menu').toggle();
    });
});

jQuery preventDefault对输入字段

4 个答案: