Question

我正在尝试创建jquery菜单，但我的代码不起作用，当我将鼠标悬停在菜单元素上时，浏览器右侧看起来就像这个蓝色的东西。

从jquery menu 复制列表元素时但是我的代码我复制了所有内容，因为我不确定问题是否是脚本或链接标记的位置

$(document).ready(function() {
  $("#menu").menu();
})

#menu{
  max-width: 150px;
}
.Container{
  max-width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Menu</title>
  <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
  <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.structure.css">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.2.1.js" charset="utf-8"></script>
  <script src="jquery-ui-1.12.1/jquery-ui.js" charset="utf-8"></script>
  <script src="script.js" charset="utf-8"></script>
</head>

<body>
  <div class="Container">
    <ul id="menu">
      <li>Rome</li>
      <ul>
        <li>History</li>
        <li>Economy</li>
        <li>Politics</li>
      </ul>
      <li>-</li>
      <li>British</li>
      <ul>
        <li>History</li>
        <li>Economy</li>
        <li>Politics</li>
      </ul>
      <li>-</li>
      <li>Ottoman</li>
      <ul>
        <li>History</li>
        <li>Economy</li>
        <li>Politics</li>
      </ul>
    </ul>
  </div>
</body>

</html>

Answer 1

  $(document).ready(function () {
    $("#menu").menu();
  })

#menu{
  max-width: 150px;
}
.Container{
  max-width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <div class="Container">
      <ul id="menu">
        <li><div>Rome</div>
        <ul>
          <li><div>History</div></li>
          <li><div>Economy</div></li>
          <li><div>Politics</div></li>
        </ul></li>
        <li><div>British</div>
        <ul>
          <li><div>History</div></li>
          <li><div>Economy</div></li>
          <li><div>Politics</div></li>
        </ul></li>
        <li><div>Ottoman</div>
        <ul>
          <li><div>History</div></li>
          <li><div>Economy</div></li>
          <li><div>Politics</div></li>
        </ul></li>
      </ul>
    </div>

在这里，你实际上并没有以jquery ui菜单需要的格式编写它。

Answer 2

您的HTML结构无效。 ul无法成为ul的孩子 - 您需要将子菜单嵌套在顶级li

中

＆＃13;

$(document).ready(function() {
  $("#menu").menu();
})

＆＃13;

#menu{
  max-width: 150px;
}
.Container{
  max-width: 150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Menu</title>
  <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
  <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.structure.css">
  <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.theme.css">
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.2.1.js" charset="utf-8"></script>
  <script src="jquery-ui-1.12.1/jquery-ui.js" charset="utf-8"></script>
  <script src="script.js" charset="utf-8"></script>
</head>

<body>
  <div class="Container">
    <ul id="menu">
      <li>Rome
      <ul>
        <li>History</li>
        <li>Economy</li>
        <li>Politics</li>
      </ul>
      </li>
      <li>British
      <ul>
        <li>History</li>
        <li>Economy</li>
        <li>Politics</li>
      </ul>
      </li>
      <li>Ottoman</li>
      <ul>
        <li>History</li>
        <li>Economy</li>
        <li>Politics</li>
      </ul>
    </ul>
  </div>
</body>

</html>

＆＃13;

无法正确定位html菜单元素（Jquery）

2 个答案: