-1

我有一些文字说“菜单”。它不是一个按钮。当有人点击文本时，我希望我的菜单/覆盖 div 出现。

为什么我的代码不起作用？

$(".open_menu").click(function() {
  $(".overlay").toggle();
});
.logo {
  float: left;
}

.open_menu {
  float: right;
  cursor: pointer;
}

.overlay {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: pink;
  z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="logo"></div>
  <div class="open_menu">Menu</div>
</header>

<div class="overlay"></div>

就在结束正文标签之前，我有这个：

<script src="javascript/javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascript.js 文件中的唯一代码如下：

$(".open_menu").click(function() {
  $(".overlay").toggle();
});

Chrome 中的 Web 开发人员工具显示“未捕获的 ReferenceError：$ 未在 javascript.js:1 中定义”这是什么意思？

4

2 回答 2

1

解决方案：我把这两行代码弄错了。这应该是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="javascript/javascript.js"></script>

首先包含 jQuery，然后包含我的文件。

于 2018-07-06T13:57:25.830 回答
1

您收到错误是因为 jQuery 未在您的javascript.js文件中定义。更改脚本顺序。首先，您需要 jQuery 的脚本，然后是您javascript.js，如下所示：

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="javascript.js"></script>
于 2018-07-06T13:38:16.350 回答