jQuery-关闭后显示元素

Question

Currently I have a full screen menu feature going on. When I click the menu button, I want my .title div to disappear. Which is working. But when I close my menu, the .title div remains gone. I want the div to reappear when I exit my full screen menu.

JavaScript

$(".navvy").click(function(){
    $(".title").hide();
});

HTML

<header>
<div class="navvy">
  <input type="checkbox" id="toggle"/>
  <label for="toggle" id="toggle-btn"></label>
  <div class="nav-icon"></div>
  <nav data-state="close">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Our Team</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header></div>

<div class="title">
<center><img src=http://i60.tinypic.com/wj73mg.png></center>
TITLE
</div>

Answer 1

Use toggle()

 $(".navvy").click(function() { $(".title").toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <header> <div class="navvy"> <input type="checkbox" id="toggle" /> <label for="toggle" id="toggle-btn"></label> <div class="nav-icon"></div> <nav data-state="close"> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Our Team</a> </li> <li><a href="#">Careers</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </header> </div> <div class="title"> <center> <img src=http://i60.tinypic.com/wj73mg.png> </center> TITLE </div> 

Answer 2

You could try using .mouseout() on the div.navvy element and pass .mouseout(f) an anonymous function that would .show() the div.title

https://api.jquery.com/mouseout/

Example for your browser js console to be used on https://stackoverflow.com

$("#question-header").click( function (e) {
    e.preventDefault();
    $("#mainbar").hide();
} )
.mouseout( function () { $("#mainbar").show(); } );