Простой способ заставить работать меню JQueryUI независимо от его содержимого - PullRequest
Новая
       15

Простой способ заставить работать меню JQueryUI независимо от его содержимого

0 голосов
/ 07 ноября 2018

Первое меню в порядке, так как это просто div. Независимо от того, где его щелкнули, он работает. Второй - это div, содержащий ссылку <a>, и он работает только в том случае, если щелкнуть правой кнопкой мыши по ссылке, но я бы хотел, чтобы он работал при нажатии в расширении самого меню, как в предыдущем меню с отд.

Как бы вы предложили решить эту проблему? 

<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();
});

1 Ответ

0 голосов
/ 08 ноября 2018

Используя обратный вызов 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 и выполнить какое-либо действие.

Надеюсь, это поможет.

...