jQuery动画只作用于一个元素，而不作用于另一个元素

Question

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

我的代码如下。蓝色框是我在所有其他代码之前动画的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元素的z-index值为-1。这将元素放置在<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的白色背景。注意，第二个绿色的盒子有一个白色的覆盖，因为它被放置在<body>和z-index:-1的后面。还需要注意的是，第一个框可以点击，而第二个则不能。

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>