无论其内容如何，​​使JQueryUI菜单正常工作的简单方法

Question

第一个菜单是OK，因为它只是一个div。无论在何处单击，它都可以工作。第二个，它是一个包含链接<a>的div，并且仅当其单击链接右边时才起作用，但是我想在菜单本身的扩展名中单击时使其起作用，例如上一个菜单div。

您如何建议解决此问题？

<ul id="menu">
  <li>
    <div onclick="alert('Click');">Item 1</div>
  </li>
  <li>
    <div><a href="index.html">Home</a></div>
  </li>
</ul>

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

Answer 1

使用select回调，您可以查看选择了哪个项目并根据该项目执行操作。有很多方法可以完成此操作，因此这里是一个简单的示例。

$(function() {
  $('#menu').menu({
    select: function(e, ui) {
      var action = $("div", ui.item).data("action");
      switch (action.split("::")[0]) {
        case "alert":
          console.log(action);
          alert(action.split("::")[1]);
          break;
        case "link":
          console.log(action);
          window.open(action.split("::")[1], '_blank');
          break;
      }
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="menu">
  <li>
    <div data-action="alert::Click">Item 1</div>
  </li>
  <li>
    <div data-action="link::index.html">Home</div>
  </li>
</ul>

您还可以选择div并分配click回调：

$("#menu li div").click(function(event){});

这也将以类似的方式工作。如果有孩子a，则可以拉动href属性并执行一些操作。

希望有帮助。