Actualmente, el cuadro de búsqueda se abre y se cierra al hacer clic en el icono de búsqueda de fuente impresionante. Pero quiero que el cuadro de búsqueda se cierre cuando el usuario haga clic en cualquier lugar dentro del cuerpo...
Mi código:
button.search-open { position: absolute; z-index: 999; background-color: transparent; border: none; padding: 8px 20px; font-size: 20px; color: #fff; top: 10px; margin-left: 1225px; border-radius: 4px; cursor: pointer; } <button class="search-open"> <i class="fa fa-search" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i> </button> <div class="search-box"> <form action="<?php echo home_url( '/' ); ?>"> <h3>Type Here To Search</h3> <label> <input type="text" name="s" placeholder="Search..."> <button type="submit" class="submit-btn"><i class="fa fa-searchs" aria-hidden="true"></i></button> </label> </form> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".search-open").click(function() { $('.search-box').toggle(); $('.search-open .fa-search, .search-open .fa-times').toggle(); }); }); </script>Gracias por adelantado :)
Tal vez puedas intentar algo como esto. Hágamelo saber
$(document).ready(function() { $('.search-open').click(function(){ $('.search-box').toggle(); $('.search-open .fa-search, .fa-times').toggle(); }); }); $(document).click(function(event) { var $target = $(event.target); if(!$target.closest('#search').length && $('.search-box').is(":visible")) { $('.search-box').slideToggle(); } }); .search-box {display:none} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="search"> <button class="search-open"> <i class="fa fa-search" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i> </button> <div id="search-box" class="search-box" > <form action="<?php echo home_url( '/' ); ?>"> <h3>Type Here To Search</h3> <label> <input type="text" name="s" placeholder="Search..."> <button type="submit" class="submit-btn"><i class="fa fa-searchs" aria-hidden="true"></i></button> </label> </form> </div> </div>