Question

尝试通过在弹出窗口外单击来删除和隐藏div。鉴于JS是用于搜索框弹出窗口。点击#search-menu后，sly-search-form将可见，同时类sreach-popup-back将添加弹出框架。

我想在点击#search-menu侧或搜索框外隐藏所有课程。

$(document).ready(function() {       
var searchvisible = 0;            
    $("#search-menu").click(function(e){ 
//This stops the page scrolling to the top on a # link.
    e.preventDefault();
    if (searchvisible ===0) {
//Search is currently hidden. Slide down and show it.
    $("#sly-search-form").slideDown(150);
    $("#s").focus(); //Set focus on the search input field.
    searchvisible = 1; //Set search visible flag to visible.
} 
else {
//Search is currently showing. Slide it back up and hide it.
    $("#sly-search-form").slideUp(200);
    searchvisible = 0;
   }
});

// Search icon close
$('#search-menu').click(function() {
$(this).toggleClass('sreach-close');
$("#sly-wrapper").toggleClass('sreach-popup-back');
});

});

HTML：

<a class='fa fa-search' href='#' id='search-menu'/>
<div id='sly-search-form' style='display: none;'>
<form action='/search' onsubmit='return updateScript();'>
<input id='sly-feed-input' name='q' placeholder='Search Site ..' size='40' type='text'/>
<input id='search-btn' type='submit' value='Search'/>
</form>

通过在弹出窗口外单击删除/隐藏div

0 个答案: