Make title disappear when button is clicked-CodePudding

How can I make the text disappear when the menu button is clicked but then come back when you exit the menu?

My efforts

$("#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>

CodePudding user response：

Your code works and do what you want, you are just missing parenthesis and curly brackets. Try copying this code:

$("#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>

CodePudding user response：

You can set one extra class (hidden) to html element that you want to hide in order to detect if it is hidden or not. Then you can use fadeIn() and fadeOut () base on html element state.

$(document).ready(function(){
  $(".btn1").click(function(){
    if ($("ul").hasClass("hidden")) {
        $("ul").removeClass("hidden").fadeIn();
    }
    else {
        $("ul").addClass("hidden").fadeOut();   
    }
  });
});

CodePudding user response：

Your code worked but why not use fadeToggle

Also you miss the code to remove the menu when leaving

I assume you want the menu to SHOW when you click and hide when you exit

$("#menuBtn").on("click", function() {
  $("ul").fadeToggle();
});

$("ul").on("mouseout",function() {
  $(this).fadeToggle();
})

ul { display:none }

<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>