jQuery animations work on one element and not another

时间：2015-07-28 17:02:47

标签： javascript jquery html css adobe-brackets

I've been working on a mockup for an app store, and now that I've built the basic framework I wanted to start using jQuery to make certain things interactive. However, none of the jQuery actions I try will work. What's odd is that if I delete all my code, and then try to run a jQuery action with just one div, then it works. Also, if it helps, I am using the Brackets editor.

My code is below. The blue box is the div I animated before all the other code and the green box is the div I animated after the rest of the code. On my end only the blue div hides on click while the green div does nothing.

What's going wrong?

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

1 个答案:

答案 0 :(得分：1)

You've given the .box element a z-index of -1. This places the element behind the <body> tag and makes it unable to be clicked.

The purpose of the z-index is not apparent, so I've removed it in my example, below, and both boxes are successfully hidden on click.

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

Below is a demonstration of an element being placed behind the <body>. I've given the <body> a white background with an opacity of 0.9. Notice that the second green box has a white overlay because it's been placed behind the <body> with z-index:-1. Also notice that the first box can be clicked, but the second cannot.

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>

相关问题
最新问题