Question

我试图让菜单从右到左显示，给它一个负面的正确位置，点击一个跨度的jQuery，它应该将位置编辑为零但是当我点击没有任何事情发生时

$(document).ready(function() {



  $(".run_menu").click(function() {

    $(".menu").animate("right", "0");
  });





});

/* Global*/

.conatianer {
  width: 1026.66px;
}
/*End global*/

/*Start navbar*/

.navbar {
  position: relative;
  background: url(data:image/jpeg;base64,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);
  background-size: cover;
  height: 700.531px;
  overflow: hidden;
}
.navbar .menu {
  position: absolute;
  right: -200px;
  width: 200px;
  height: 700px;
  background-color: gray;
  color: white;
}
.navbar .overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, .2);
  width: 100%;
  height: 700.531px;
  z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
  position: relative;
  z-index: 2;
}
.navbar .navbar_one h3 {
  float: left;
  margin-top: 0;
  color: #FFF;
  padding: 20px;
  text-transform: capitalize;
}
.navbar .navbar_one div {
  float: right;
  margin-right: 10px;
  color: #FFF;
  padding: 20px;
}
.navbar .navbar_two {
  text-align: center;
  padding-top: 230px;
}
.navbar .navbar_two i {
  color: #FFF
}
.navbar .navbar_two h1 {
  text-transform: capitalize;
  color: #FFF;
}
.navbar .navbar_two h3 {
  text-transform: capitalize;
  color: #FFF
}
.navbar .navbar_two ul {
  list-style: none;
}
.navbar .navbar_two ul li {
  width: 110px;
  background-color: rgba(81, 186, 164, .8);
  -webkit-border-radius: 25px;
  -moz-border-radius: 10px;
  border-radius: 25px;
  text-align: center;
  color: #FFF;
  font-family: Arial;
  font-size: 20px;
  font-weight: 600;
  line-height: 10px;
  cursor: pointer;
  padding: 20px 25px;
  margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
  background-color: #51baa4;
}
.navbar .navbar_two ul li a {
  color: #FFF;
  text-decoration: none
}
/*End navbar*/

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Template retrospect</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/StyleSheet.css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" />
  <link rel="stylesheet" href="css/normalize.css" />

</head>

<body>
  <!--Start NavBar-->
  <div class="navbar">
    <div class="menu">
      <!--Menu -->
      <i class="fa fa-long-arrow-right"></i>
      <ul>
        <li>home</li>
        <li>generic</li>
        <li>elements</li>
      </ul>
    </div>
    <div class="overlay"></div>
    <div class="navbar_one">
      <h3>retrospect</h3>
      <div>
        <i class="fa fa-bars fa-lg"></i>
        <span class="runmenu">menu</span> <!--menu should appear when click on it -->
        <!--Open Menu on click-->
      </div>
    </div>
    <div class="navbar_two">
      <i class="fa fa-soundcloud fa-4x"></i>
      <h1>etiam adipiscing</h1>
      <h3>magna feugiat lorem dolor egetas</h3>
      <ul>
        <li><a href="#">learn more </a>
        </li>
      </ul>
    </div>

  </div>






  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/JavaScript.js"></script>
</body>

</html>

Answer 1

您的代码没有.run_menu。添加一个按钮，您的.animate功能错误：

$(".menu").animate({
  "right": 0
}, 1000);

您的<span>实际上有错误的班级名称：

<span class="runmenu">menu</span>

应该是：

<span class="run-menu">menu</span>

此外，由于错误z-index，无法访问菜单。请妥善解决。

工作输出：http://output.jsbin.com/salutajuna

请点击了解更多。

jQuery菜单没有出现

1 个答案: