jquery

Question

目前我正在使用全屏菜单功能。当我单击菜单按钮时，我希望 .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>

Answer 1

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

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

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

要在 https://whosebug.com

上使用的浏览器 js 控制台示例

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

jquery - 关闭后显示元素

jquery - show elements after closing

html

javascript

navigation

menu