jQuery 动画适用于一个元素而不适用于另一个元素

Question

我一直在为应用程序商店制作模型，现在我已经构建了基本框架，我想开始使用 jQuery 使某些东西具有交互性。但是，我尝试的 jQuery 个操作中的 none 个会起作用。奇怪的是，如果我删除我所有的代码，然后尝试运行一个 jQuery 动作，只用一个 div，那么它就可以工作了。另外，如果有帮助，我正在使用括号编辑器。

我的代码如下。蓝色框是我在所有其他代码之前设置动画的 div，绿色框是我在其余代码之后设置动画的 div。在我这边，只有蓝色 div 在点击时隐藏，而绿色 div 什么都不做。

怎么了？

$(document).ready(function() {
  $(".scroll-menu").click(function() {
    $(".scroll-menu").hide();
  });
  $(".box").click(function() {
    $(".box").hide();
  });
});

.box {
  z-index: -1;
  margin-top: 20em;
  position: relative;
  width: 10em;
  height: 20em;
  background: green;
  left: 20em
}
.scroll-menu {
  background: blue;
  height: 300px;
  width: 500px;
  margin: auto;
}
nav {
  position: absolute;
  height: 100%;
  width: 16em;
  left: 0;
  top: 0;
  background: #f5f5f5;
  border-right: .1em solid grey
}
.mini-menu {
  position: relative;
  background: #E3E0E6;
  top: 5em;
  height: 32em
}
.top-menu {
  position: relative;
  top: 5em;
  list-style-type: none;
  margin-left: -1em;
}
.top-menu li {
  position: relative;
  padding-top: .2em;
  padding-bottom: .2em;
  font-size: 1.1em;
  font-family: droid-sans;
  font-weight: ;
  border-radius: .5em;
  margin-right: .5em;
  margin-top: .5em;
  margin-left: -.5em;
  padding-left: 1em;
}
.top-menu li:hover {
  background: #725490;
}
.top-menu li a {
  text-decoration: none;
  color: #000000
}
.top-menu li:hover a {
  color: white;
}
.mini-menu ul li {
  position: relative;
  padding-top: .2em;
  padding-bottom: .2em;
  font-size: 1em;
  font-family: droid-sans;
  font-weight: ;
  border-radius: .5em;
  margin-right: .5em;
  margin-top: .5em;
  margin-left: -.5em;
  padding-left: 1em;
}
.mini-menu ul {
  position: relative;
  top: .9em;
  list-style-type: none;
  margin-left: -1em;
}
.mini-menu ul li a {
  text-decoration: none;
  color: rgb(109, 52, 150);
}
.mini-menu a:hover {
  color: #ab6bb1
}
.header {
  position: absolute;
  height: 5em;
  width: 100%;
  left: 0;
  top: 0;
  background: white;
  z-index: 1;
  border-bottom: .12em solid grey
}
.logo {
  position: relative;
  width: 10em;
  height: auto;
  left: 2em;
  top: 2em
}
.app {
  positio: relative;
  margin-left: 8.8em;
  margin-top: -.1em;
  font-family: antic, ;
  font-size: 1.4em
}
.search {
  position: relative;
  left: 12em;
  top: -2em;
  width: 15em;
  border: .06em solid grey;
  font-family: antic, ;
  font-size: 1.9em;
  padding-left: .5em
}
form i {
  position: relative;
  left: 11.5em;
  top: -1.9em;
  color: purple;
  cursor: pointer;
}
.icon-open {
  position: absolute;
  top: 5em;
  cursor: pointer;
  z-index: 4;
  left: 19em
}
.icon-open i {
  cursor: pointer
}
{
  position: relative;
  background: green;
  height 30em;
  width: 6em;
  top: 30em;
  left: 50em;
  border: solid;
  z-index: 20;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
  <ul class="top-menu">
    <li><a href="#"> Home</a></li>
    <li><a href="#"> Popular</a></li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Collections</a></li>
  </ul>
  <div class="mini-menu">
    <ul>
      <li><a href="#">Diagnosis & Staging</a></li>
      <li><a href="#">Image Review</a></li>
      <li><a href="#">Rx & Protocols</a></li>
      <li><a href="#">Planning</a></li>
      <li><a href="#">Chart Checks & Reviews</a></li>
      <li><a href="#">Calibration</a></li>
      <li><a href="#">Policy & Procedure</a></li>
      <li><a href="#">Certifications</a></li>
      <li><a href="#">Connected Clinical</a></li>
      <li><a href="#">Messaging</a></li>
      <li><a href="#">Utilities</a></li>
      <li><a href="#">Interfaces</a></li>
      <li><a href="#">Acounting & Finance</a></li>
      <li><a href="#">Clinical Analytics</a></li>
    </ul>
  </div>
</nav>
<div class="header">
  <img src="MedLever-Logo-HighRes.png" class="logo">
  <p class="app">App Store</p>
  <form>
    <input type="text" autocomplete="on" name="search" class="search">
    <i class="fa fa-search fa-2x"></i>
  </form>
</div>
<div class="icon-open">
  <i class="fa fa-bars"></i>
</div>

Answer 1

您已将 .box 元素指定为 -1 的 z-index。这会将元素放在 <body> 标签后面，使其无法被点击。

z-index 的目的不明显，因此我在下面的示例中将其删除，点击后两个框都成功隐藏了。

$(document).ready(function() {
  $(".scroll-menu").click(function() {
    $(".scroll-menu").hide();
  });
  $(".box").click(function() {
    $(".box").hide();
  });
});

.box {
  margin-top: 20em;
  position: relative;
  width: 10em;
  height: 20em;
  background: green;
  left: 20em
}
.scroll-menu {
  background: blue;
  height: 300px;
  width: 500px;
  margin: auto;
}
nav {
  position: absolute;
  height: 100%;
  width: 16em;
  left: 0;
  top: 0;
  background: #f5f5f5;
  border-right: .1em solid grey
}
.mini-menu {
  position: relative;
  background: #E3E0E6;
  top: 5em;
  height: 32em
}
.top-menu {
  position: relative;
  top: 5em;
  list-style-type: none;
  margin-left: -1em;
}
.top-menu li {
  position: relative;
  padding-top: .2em;
  padding-bottom: .2em;
  font-size: 1.1em;
  font-family: droid-sans;
  font-weight: ;
  border-radius: .5em;
  margin-right: .5em;
  margin-top: .5em;
  margin-left: -.5em;
  padding-left: 1em;
}
.top-menu li:hover {
  background: #725490;
}
.top-menu li a {
  text-decoration: none;
  color: #000000
}
.top-menu li:hover a {
  color: white;
}
.mini-menu ul li {
  position: relative;
  padding-top: .2em;
  padding-bottom: .2em;
  font-size: 1em;
  font-family: droid-sans;
  font-weight: ;
  border-radius: .5em;
  margin-right: .5em;
  margin-top: .5em;
  margin-left: -.5em;
  padding-left: 1em;
}
.mini-menu ul {
  position: relative;
  top: .9em;
  list-style-type: none;
  margin-left: -1em;
}
.mini-menu ul li a {
  text-decoration: none;
  color: rgb(109, 52, 150);
}
.mini-menu a:hover {
  color: #ab6bb1
}
.header {
  position: absolute;
  height: 5em;
  width: 100%;
  left: 0;
  top: 0;
  background: white;
  z-index: 1;
  border-bottom: .12em solid grey
}
.logo {
  position: relative;
  width: 10em;
  height: auto;
  left: 2em;
  top: 2em
}
.app {
  positio: relative;
  margin-left: 8.8em;
  margin-top: -.1em;
  font-family: antic, ;
  font-size: 1.4em
}
.search {
  position: relative;
  left: 12em;
  top: -2em;
  width: 15em;
  border: .06em solid grey;
  font-family: antic, ;
  font-size: 1.9em;
  padding-left: .5em
}
form i {
  position: relative;
  left: 11.5em;
  top: -1.9em;
  color: purple;
  cursor: pointer;
}
.icon-open {
  position: absolute;
  top: 5em;
  cursor: pointer;
  z-index: 4;
  left: 19em
}
.icon-open i {
  cursor: pointer
}
{
  position: relative;
  background: green;
  height 30em;
  width: 6em;
  top: 30em;
  left: 50em;
  border: solid;
  z-index: 20;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
  <ul class="top-menu">
    <li><a href="#"> Home</a></li>
    <li><a href="#"> Popular</a></li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Collections</a></li>
  </ul>
  <div class="mini-menu">
    <ul>
      <li><a href="#">Diagnosis & Staging</a></li>
      <li><a href="#">Image Review</a></li>
      <li><a href="#">Rx & Protocols</a></li>
      <li><a href="#">Planning</a></li>
      <li><a href="#">Chart Checks & Reviews</a></li>
      <li><a href="#">Calibration</a></li>
      <li><a href="#">Policy & Procedure</a></li>
      <li><a href="#">Certifications</a></li>
      <li><a href="#">Connected Clinical</a></li>
      <li><a href="#">Messaging</a></li>
      <li><a href="#">Utilities</a></li>
      <li><a href="#">Interfaces</a></li>
      <li><a href="#">Acounting & Finance</a></li>
      <li><a href="#">Clinical Analytics</a></li>
    </ul>
  </div>
</nav>
<div class="header">
  <img src="MedLever-Logo-HighRes.png" class="logo">
  <p class="app">App Store</p>
  <form>
    <input type="text" autocomplete="on" name="search" class="search">
    <i class="fa fa-search fa-2x"></i>
  </form>
</div>
<div class="icon-open">
  <i class="fa fa-bars"></i>
</div>

下面是放置在 <body> 后面的元素的演示。我已经为 <body> 设置了不透明度为 0.9 的白色背景。请注意，第二个绿色框有一个白色覆盖层，因为它被放置在带有 z-index:-1 的 <body> 后面。另请注意，第一个框可以单击，但第二个不能。

html,body {
  background-color:rgba(255,255,255,.9)
}
.box {
  position:relative;
  width: 10em;
  height: 20em;
  background: green;
  display:inline-block;
}
.behind {
  z-index:-1;
}

<a href="#" class="box">CLICK</a>
<a href="#" class="box behind">CAN'T CLICK</a>

jQuery 动画适用于一个元素而不适用于另一个元素

jQuery animations work on one element and not another

html

javascript

css

jquery

adobe-brackets