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