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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以尝试在.mouseout()元素上使用div.navvy，并将.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(); } );

jquery - 关闭后显示元素

2 个答案: