¿Cómo puedo hacer que el texto desaparezca cuando se hace clic en el botón de menú pero luego vuelve cuando sale del menú?
Mis esfuerzos
$("#menuBtn").click(function() { if ($("ul").css("display") == "none") { $("ul").fadeIn(); } else { $("ul").fadeOut(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" id="menuBtn">Click</button> <ul> <li>Menu</li> </ul>Su código funciona y hace lo que quiere, solo le faltan paréntesis y corchetes. Intenta copiar este código:
$("#menuBtn").click(function() { if($("ul").css("display") === "none") { $("ul").fadeIn(); } else { $("ul").fadeOut(); } }) //Fade out when the mouse leaves the menu $("ul").mouseleave(function() { $("ul").fadeOut(); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="menuBtn">Menu button</button> <ul style="display: none"> <li>Menu item 1</li> <li>Menu item 2</li> <li>Menu item 3</li> </ul>Puede establecer una clase adicional (oculta) en el elemento html que desea ocultar para detectar si está oculto o no. Luego puede usar fadeIn () y fadeOut () en función del estado del elemento html.
$(document).ready(function(){ $(".btn1").click(function(){ if ($("ul").hasClass("hidden")) { $("ul").removeClass("hidden").fadeIn(); } else { $("ul").addClass("hidden").fadeOut(); } }); });