代码之家  ›  专栏  ›  技术社区  ›  Markeee

jquery-当有人单击文本菜单时

  •  -1
  • Markeee  · 技术社区  · 6 年前

    我有条短信说“菜单”。它不是一个按钮。当有人点击文本时,我希望我的菜单/覆盖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开发工具说“uncaught referenceerror:$is not defined at javascript.js:1”这是什么意思?是吗?

    2 回复  |  直到 6 年前
        1
  •  1
  •   reisdev    6 年前

    您正在接收错误,因为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>
    
        2
  •  1
  •   Markeee    6 年前

    解决方案:我把这两行代码搞错了。它应该是这样的:

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

    首先包括jquery,然后包括我的文件。