Question

我已经通过jQuery切换完成了搜索框。

jQuery('.menu-search .icon-search').toggle(
    function() {
        jQuery('.menu-search form').fadeIn( "first" );
    },
    function() {
        jQuery('.menu-search form').fadeOut( "first" );
    }
);

当我单击搜索图标时，再次单击搜索图标时，搜索框会出现并消失。但是当我在搜索框外面点击时，我想消失。我试过了，但它没有用。

jQuery('html').click(function (event) {
    jQuery('.menu-search form').fadeOut( "first" );
    event.stopPropagation();
})

我知道我可以使用not（），但我试过了。它也不起作用。我试过这样的

jQuery('html').not('.search-form fieldset').click(function (event) {
    jQuery('.menu-search form').fadeOut( "first" );
    event.stopPropagation();
})

这是脚本的HTML。

<li class="menu-search clearfix menu-item menu-item-type-post_type menu-item-object-page "><i class="icon-search"></i><form action="http://mybebsite.com/" class="search-form clearfix" style="display: block;">
    <fieldset>

        <input type="submit" value="Go" class="submit">
        <i class="icon-search"></i>
        <input type="text" class="search-form-input text" name="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" value="Search">

    </fieldset>
</form>
</li>

Answer 1

尝试使用此代码

jQuery('html').click(function (event) {
    jQuery('.menu-search form').fadeOut( "first" );
    event.stopPropagation();
})
jQuery('.menu-search form').click(function (event) {
    return false;
})

这样你的搜索框就不会消失。

通过单击搜索框外部，搜索框消失

1 个答案: