Question

我是JavaScript新手我不太了解它。

我使用了这段代码：但我不知道我做错了什么。

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>

  <script type="text/javascript">
    jQuery(function($) {
      var $bgs = $('.menu-toggle');
      $('.menu-item').click(function() {
        var $target = $($(this).data('target')).stop(true).slideToggle();
        $bgs.not($target).filter(':visible').stop(true, true).slideUp();
      })
    })
  </script>

</head>

<body>

  <div class="menu-item menu-item-1" data-target=".recovery-bg">
    <a href="#">Recovery</a>
  </div>
  <div class="menu-item menu-item-2" data-target=".forensic-bg">
    <a href="#">Forensics</a>
  </div>
  <div class="menu-item menu-item-3" data-target=".erasure-bg">
    <a href="#">Erasure</a>
  </div>
  <div class="menu-item menu-item-4" data-target=".training-bg">
    <a href="#">Training</a>
  </div>
  <div class="menu-item menu-item-5" data-target=".product-bg">
    <a href="#">Products</a>
  </div>
  <div class="menu-toggle recovery-bg">
    recovery-bg
  </div>
  <div class="menu-toggle forensic-bg">
    forensic-bg
  </div>
  <div class="menu-toggle erasure-bg">
    erasure-bg
  </div>
  <div class="menu-toggle training-bg">
    training-bg
  </div>
  <div class="menu-toggle product-bg">
    product-bg
  </div>

</body>

</html>

＆＃13;

我确实从这个网站获得了相同的代码，但我没有任何运气。

Answer 1

它不起作用，因为缺少参考。您必须添加参考。

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

Answer 2

我在你的代码中看到你正在使用jquery函数，但你甚至没有把它调用到你的html页面。

<强>步骤1：下载jquery

<强>步骤2：把它叫到你的html页面

<script src="jquery.min.js"></script>

用于显示和隐藏多个菜单项的JavaScript代码

2 个答案: