1

我在这里遇到了一个奇怪的问题。

我开发了一个包含多个操作的搜索框。重要的是当用户单击按钮时它会（或应该......）打开。

HTML：

<form method="get" id="searchform" action="">
    <input type="search" placeholder="Search" size="18" value="" name="s" id="s" />
    <input type="submit" value=""></input>
</form>

CSS：

#searchform {
    position: relative;
    min-width: 40px;
    height: 80px;
    float: right;
}
#searchform input[type="search"] {
    margin-right: 40px;
    height:80px;
    width:2px;
    background:rgba(245, 245, 240, 1);
    padding: 0;

    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}
#searchform input[type="submit"] {
    background: rgba(255, 255, 255, 1);
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 80px;
}
#searchform.open input[type="search"] {
    width: 180px;
    padding: 0 0 0 20px;
}
#searchform.open input[type="submit"] {
    background:rgba(200, 160, 0, 1);
}

JS：

$('#searchform input[type="submit"]').click(function () {
    $("#searchform").toggleClass('open');
});

$('#searchform input[type="submit"]').click(function () {
    if ($('#searchform').hasClass('open') && $.trim($('#searchform input[type="search"]').val()).length === 0) {
        event.preventDefault();
        $('#searchform').removeClass('open');
    }
});

$(document).bind('click', function () {
    $('#searchform').removeClass('open');
});

$('#searchform').bind('click', function (event) {
    event.stopPropagation();
});

这是一个小提琴：http: //jsfiddle.net/5zB8f/1/

打开动作非常简单。一个 jQuery 脚本添加class="open"到#searchform，但它只是添加类......代码似乎有效，所以我不知道它为什么会这样。

如果您手动将该类添加到 html 并运行它，您将看到它应该转换到什么。

任何帮助表示赞赏。如果有人可以告诉我如何优化该 jQuery 脚本，则可以加分……我确信我已经编写了超出必要的内容以使其正常工作……

编辑：我toggleClass现在已经到了那里，但它的行为与addClass...相同

4

1 回答 1

3

这是你需要的吗？

http://jsfiddle.net/5zB8f/3/

$('#searchform input[type="submit"]').click(function () {
    $("#searchform").toggleClass('open');
    if ($('#searchform').hasClass('open') && $.trim($('#searchform input[type="search"]').val()).length === 0) {
        event.preventDefault();
    }
    if ($("#searchform").hasClass("open")) return false;
});


$(document).bind('click', function () {
    $('#searchform').removeClass('open');
});

$('#searchform').bind('click', function (event) {
    event.stopPropagation();
});
于 2013-10-24T21:40:43.857 回答