Question

我有一些文字说“菜单”。这不是一个按钮。当有人单击文本时，我希望我的菜单/叠加层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中未定义$”是什么意思？

Answer 1

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

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="javascript.js"></script>

Answer 2

解决方案：我以错误的方式获得了这两行代码。这应该是这样：

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

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

jQuery-当有人单击文本菜单时出现

2 个答案: