單擊其他任何位置時關閉搜索框
[英]Close Search box when clicking anywhere else
問題描述
當用戶點擊我的搜索欄以外的任何其他內容時，我希望關閉我的搜索框。 我已經嘗試了一些關於堆棧溢出的解決方案，但它們似乎不適用於我的實現。
$( document ).ready(function() { $('[data-toggle=search-form]').click(function(event) { event.stopPropagation(); $('.search-form-wrapper').toggleClass('open'); }); $('.search-close, body').click(function(event) { if($('.search-form-wrapper').hasClass('open')) { $('.search-form-wrapper').removeClass('open'); $('html').removeClass('search-form-open'); } }); }); .search-form-wrapper { display: none; position: absolute; top:100px; left:0; width:100%; margin:0px; z-index: 9998; }.search-form-wrapper.open { display: block; }.search-form-wrapper.search-bar input { height: 41px; width:100%; border-radius: 0px; -webkit-appearance: none; border:0px; border-bottom: 1px solid #dddcde; background: rgba(255,255,255,1); padding-left: 45px; line-height: 39px; -webkit-transition: background.4s; transition: background.4s; font-family: system-ui; }.search-form-wrapper.search-bar.material-icons { height: 70px; line-height: 70px; }.search-form-wrapper.search-bar input:focus { background: rgba(255,255,255,1); outline-width: 0; }.search-form-wrapper.search-bar input:focus +.active { color:#4B2058; }.search-form-wrapper.search-bar input::placeholder { color:#ffffff8c; font-size:15px; }.search-form-wrapper.search-bar label { top:0; left:12px; position: absolute; color: #45136A; -webkit-transition: color.4s; transition: color.4s; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav id="topNav" class="navbar fixed-to navbar-expand-md"> <a class="navbar-brand mx-auto" href="/"> <img src="{{ siteUrl }}/img/logo.svg" alt="Go to Ticketstoday Homepage"/> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> Menu </button> <div class="navbar-collapse collapse"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link menu-btn" href="#"><span class="material-icons">menu</span>Browse</a> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="search-form"><span class="material-icons">search</span>Search</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><span class="material-icons">favorite_border</span>Top 50</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Join</a> </li> </ul> </div> </nav> <div class="search-form-wrapper"> <form action="{{ url('search/results') }}" class="search-bar" autocomplete="off" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction"> <meta itemprop="target" content="{{ siteUrl }}/search/results?q={search_term_string}"/> <input id="search" itemprop="query-input" type="search" aria-label="Search" name="q" placeholder="Search for Coupons, Stores & Deals" class="browser-default"> <label for="search"><i class="material-icons">search</i></label> <span class="input-group-addon search-close" id="basic-addon2"><i class="fa fa-window-close" aria-hidden="true"></i> </form> </div>
在上面添加了 Snippet 而不僅僅是代碼，希望這將幫助我們解決問題 - 正如您所看到的，當它打開時單擊搜索欄 - 它會關閉搜索框。
1 個解決方案
解決方案1
1 已采納 2020-06-06 14:42:22
您也可以簡單地在<body>上附加單擊事件，請注意我將event傳遞給回調並使用event.stopPropagation(); 以防止觸發文檔正文上的事件。
像這樣的東西：
$(document).ready(function () { const searchForm = $("#search").get(0); $("[data-toggle=search-form]").click(function (event) { event.stopPropagation(); $(".search-form-wrapper").toggleClass("open"); }); $(".search-close, body").click(function (event) { if (event.target.== searchForm) { $(".search-form-wrapper");removeClass("open"). $("html");removeClass("search-form-open"); } }); });
.search-form-wrapper { display: none; position: absolute; top: 100px; left: 0; width: 100%; margin: 0px; z-index: 9998; }.search-form-wrapper.open { display: block; }.search-form-wrapper.search-bar input { height: 41px; width: 100%; border-radius: 0px; -webkit-appearance: none; border: 0px; border-bottom: 1px solid #dddcde; background: rgba(255, 255, 255, 1); padding-left: 45px; line-height: 39px; -webkit-transition: background.4s; transition: background.4s; font-family: system-ui; }.search-form-wrapper.search-bar.material-icons { height: 70px; line-height: 70px; }.search-form-wrapper.search-bar input:focus { background: rgba(255, 255, 255, 1); outline-width: 0; }.search-form-wrapper.search-bar input:focus+.active { color: #4B2058; }.search-form-wrapper.search-bar input::placeholder { color: #ffffff8c; font-size: 15px; }.search-form-wrapper.search-bar label { top: 0; left: 12px; position: absolute; color: #45136A; -webkit-transition: color.4s; transition: color.4s; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav id="topNav" class="navbar fixed-to navbar-expand-md"> <a class="navbar-brand mx-auto" href="/"> <img src="{{ siteUrl }}/img/logo.svg" alt="Go to Ticketstoday Homepage"/> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> Menu </button> <div class="navbar-collapse collapse"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link menu-btn" href="#"><span class="material-icons">menu</span>Browse</a> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="search-form"><span class="material-icons">search</span>Search</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><span class="material-icons">favorite_border</span>Top 50</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Join</a> </li> </ul> </div> </nav> <div class="search-form-wrapper"> <form action="{{ url('search/results') }}" class="search-bar" autocomplete="off" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction"> <meta itemprop="target" content="{{ siteUrl }}/search/results?q={search_term_string}"/> <input id="search" itemprop="query-input" type="search" aria-label="Search" name="q" placeholder="Search for Coupons, Stores & Deals" class="browser-default"> <label for="search"><i class="material-icons">search</i></label> <span class="input-group-addon search-close" id="basic-addon2"><i class="fa fa-window-close" aria-hidden="true"></i> </form> </div>
$(document).ready(function () {
const searchForm = $("#search").get(0);
$("[data-toggle=search-form]").click(function (event) {
event.stopPropagation();
$(".search-form-wrapper").toggleClass("open");
});
$(".search-close, body").click(function (event) {
if (event.target !== searchForm) {
$(".search-form-wrapper").removeClass("open");
$("html").removeClass("search-form-open");
}
});
});
在沒有jQuery的情況下單擊頁面上的其他任何位置時，如何關閉子菜單？
[英]How do I close a child menu when clicking anywhere else on the page without jQuery?
高圖表+高幻燈片：打開新的高幻燈片彈出窗口或單擊其他任意位置時，關閉任何以前打開的彈出窗口
[英]Highcharts + Highslide: When opening a new highslide popup or clicking anywhere else, close any previously opened popups
如果在可見表單旁邊單擊頁面上的其他任何位置，則關閉搜索表單
[英]Close search form if anywhere else on page is clicked besides the visible form
$（document）.on（“ click”…單擊文檔上任何其他位置時如何折疊列表
[英]$(document).on(“click”… how to collapse a list when clicking anywhere else on the document
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.