0

我有一个嵌套列表项，已放置在 ul li html 标记下。我希望用户仅通过“鼠标单击”事件沿着所有列表项移动。

目前下面的代码工作正常，用于“鼠标悬停”事件，但不适用于“鼠标点击”事件。我有未绑定的鼠标悬停事件。

请让我知道如何确保单击事件的相同行为。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>menu demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <style>
  .ui-menu {
    width: 200px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3 </a>
    <ul>
      <li><a href="#">Item 3-1</a></li>
      <li><a href="#">Item 3-2</a></li>
        <li><a href="#">Item 3-3</a>
            <ul>
                <li><a href="#">Item 3-3-1</a>
                    <ul>
                        <li><a href="#">Item 3-3-1-1</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 3-3-2</a></li>
            </ul>
        </li>
      <li><a href="#">Item 3-4</a></li>
      <li><a href="#">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

<script>
$("#menu").menu();
$("#menu").unbind('mouseenter mouseleave mouseover mouseout'); // we want to monitor only mouse click events

$("li:has(ul)").click(function () { 
    $(this).parent().menu();
    $(this).parent().unbind('mouseenter mouseleave mouseover mouseout'); 
});
$("li ul li:has(ul)").click(function () {
    $(this).parent().menu();
    $(this).parent().unbind('mouseenter mouseleave mouseover mouseout'); 
});
</script>

</body>
</html>
4

0 回答 0