Question

我使用notepad ++然后运行 - >在chrome中启动以测试我的代码。但是我的代码似乎没有用。单击菜单（图像）时，应显示菜单。代码是：

<html>
<head>
<style> 
h3 {
    font-size: 30px;
    text-align: center;
}
p {
    font-size: 20px;
}
.onclick-menu {
    position: relative;

}
.onclick-menu-content {
    padding: 10px;
    top: -15px;
    bottom: -15px;
    left: 0px;
    right: 0px;
    background-color: #000000;
    transition: visibility 0.5s;
}
.onclick-menu-content h3, a {
    color: #ffffff;
    text-align: center;
}
.menu {
    position: fixed;
    top: 10px;
    left: 10px;
}
.menu-list {
    margin: auto;
    padding: 0;
    text-align: center;
    list-style: none;
}
.hidden {
    display: none;
}
</style>
</head>
<body>
<div class="main-content">
<h3> Main Content Goes Here</h3>
    <img src="menu.png" class="menu">
        <div class="onclick-menu-content hidden">
            <h3>Menu</h3>
            <ul class="menu-list">
                <li><a href="">Home</a>
                </li>
                <li><a href="">Services</a>
                </li>
                <li><a href="">About Us</a>
                </li>
                <li><a href="">Contact Us</a>
                </li>
            </ul>
        </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("img.menu").on("click", function(){
    $(".onclick-menu-content").toggleClass("hidden");
});
</script>
</body>
</html>

我不确定为什么没有人可以帮忙？

Answer 1

问题是你试图使用它后包含jQuery。

之前做。

h3 {
  font-size: 30px;
  text-align: center;
}
p {
  font-size: 20px;
}
.onclick-menu {
  position: relative;

}
.onclick-menu-content {
  padding: 10px;
  top: -15px;
  bottom: -15px;
  left: 0px;
  right: 0px;
  background-color: #000000;
  transition: visibility 0.5s;
}
.onclick-menu-content h3, a {
  color: #ffffff;
  text-align: center;
}
.menu {
  position: fixed;
  top: 10px;
  left: 10px;
}
.menu-list {
  margin: auto;
  padding: 0;
  text-align: center;
  list-style: none;
}
.hidden {
  display: none;
}

<div class="main-content">
  <h3> Main Content Goes Here</h3>
  <img src="menu.png" class="menu" alt="[img]">
  <div class="onclick-menu-content hidden">
    <h3>Menu</h3>
    <ul class="menu-list">
      <li><a href="">Home</a>
      </li>
      <li><a href="">Services</a>
      </li>
      <li><a href="">About Us</a>
      </li>
      <li><a href="">Contact Us</a>
      </li>
    </ul>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $("img.menu").on("click", function(){
    $(".onclick-menu-content").toggleClass("hidden");
  });
</script>

单击图像时，js功能不起作用

1 个答案: