Question

提前非常感谢。我正在构建一个div / searchbar，当用户点击按钮时会出现该div / searchbar。我添加了一个功能，搜索区域外的任何点击都会将类重新更改为默认隐藏。我需要一些帮助...

如果用户点击了响应式视图中的“.navbar-toggle”按钮，请检查showSearch是否为最新，以及是否要运行hideSearch。我不希望搜索栏和navmenu彼此出现。

var $body = $('body');
var searchClick = $('#search-button');
var navToggle = $('.navbar-toggle');

function showSearch() {
        $body.toggleClass("show-search");
        searchClick.toggleClass("glyphicon-remove");
        $("#search-input input").focus();
}

function hideSearch() {
        $body.removeClass("show-search");
        searchClick.removeClass("glyphicon-remove");
}

searchClick.on("click", function (e) {
        e.preventDefault();
        if (!$body.hasClass("show-search")) {
        showSearch();
} else {
        hideSearch();
}
});



$(document).mouseup(function (e)
{
    var container = $("#search-input, header");
    if (!container.is(e.target) && container.has(e.target).length === 0)   {
        hideSearch();
    }
});

请原谅我的编码能力，我是编程新手。：）

切换具有功能的搜索栏

0 个答案: