jquery - 关闭后显示元素答案

【问题标题】：jquery - show elements after closingjquery - 关闭后显示元素
【发布时间】：2015-08-10 21:19:11
【问题描述】：

目前我正在使用全屏菜单功能。当我单击菜单按钮时，我希望我的 .title div 消失。哪个正在工作。但是当我关闭菜单时，.title div 仍然消失了。我希望 div 在我退出全屏菜单时重新出现。

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>

【问题讨论】：

你试过了吗？
stackoverflow.com/questions/8484251/… 这样就可以了

标签： javascript jquery html menu navigation

【解决方案1】：

您可以尝试在 div.navvy 元素上使用 .mouseout() 并传递 .mouseout(f) 一个匿名函数，该函数将 .show() div.title

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

在https://stackoverflow.com 上使用的浏览器 js 控制台示例

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

【讨论】：

【解决方案2】：

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

【讨论】：