quiero cambiar la visualización de un elemento a ninguno cuando el usuario abre el menú de mi sitio web que utilicé en el evento de clic y cambié la visualización por DOM pero quiero que la visualización no cambie cuando el usuario cierre el menú ¿qué debo hacer?
}
function removeSearch(){ document.getElementById("search-id").style.display = "none"; } <button type = "button" onclick="removeSearch()" class = "navbar-toggler">Aquí hay un ejemplo en el que puede realizar un seguimiento del estado del menú y alternar el elemento que desea mostrar y ocultar por su atributo de datos.
const menuToggle = document.querySelector('.menu_toggle'); const menu = document.querySelector('.menu'); const someElement = document.querySelector('.some_element'); menuToggle.addEventListener('click',e=>{ if(menu.dataset.state==='closed'){ menu.dataset.state='opened' someElement.dataset.state='closed' }else{ menu.dataset.state='closed' someElement.dataset.state='opened' } }) .menu{ background: rgb(152, 152, 233); } [data-state="closed"]{ display: none; } .some_element{ background: rgb(36, 36, 36); color: white; padding: 2em; } <button class="menu_toggle">Toggle Menu</button> <div class="menu" data-state="closed"> <h2>Menu</h2> <ul> <li>Apple</li> <li>Orange</li> <li>Grapes</li> </ul> </div> <div class="some_element">Element to Show and Hide</div>Como está usando jquery, puede usar el método .toggle() para alternar el elemento. Prueba esto
$(document).ready(function(){ $('.navbar-toggler').click(function(){ $("#search-id").toggle(); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="navbar-toggler">Toggle Menu</button> <ul id="search-id" style="display:none;"> <li>Dog</li> <li>Cat</li> <li>Mouse</li> </ul>