Question

我创建了一个包含图标的jquery-ui选择菜单，但是当点击时，不会调用select函数。

正确回复文字的项目请参阅以下内容：

THX！

＆＃13;

$(function() {
  $("#menu").menu({
    select: function(event, ui) {
      alert('click');
    }
  });
});

＆＃13;

#menu li {
  height: auto;
  margin: 0;
}

＆＃13;

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" />

<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"></script>

<ul id="menu">
  <li>hello</li>
  <li>
    <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/24-128.png" height=20 width=20 />
  </li>
  <li>
    <img src="https://cdn1.iconfinder.com/data/icons/material-core/24/cloud-download-128.png" height=20 width=20>
  </li>
</ul>

＆＃13;

编辑：

我发现由于某种原因，jqueryUI给图像一个分隔符类而不是菜单项类。

我可以通过添加像这样的额外div来解决我的问题

＆＃13;

$(function() {
  $("#menu").menu({
    select: function(event, ui) {
      alert('click');
    }
  });
});

＆＃13;

#menu li {
  height: auto;
  margin: 0;
}

＆＃13;

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" />

<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"></script>

<ul id="menu">
  <li>hello</li>
  <li>
    <div class="ui-menu-item">
      <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/24-128.png" height=20 width=20 />
    </div>
  </li>
  <li>
    <div class="ui-menu-item">
      <img src="https://cdn1.iconfinder.com/data/icons/material-core/24/cloud-download-128.png" height=20 width=20>
    </div>
  </li>
</ul>

＆＃13;

我仍然希望更好的解决方案/解释是可能的

Answer 1

基于jQuery UI Menu Widget documentation，它将所有带空格或破折号的列表项视为菜单分隔符（读取here）。

在您的情况下，我认为因为除了图像之外，菜单项上没有任何内容，所以该项目被视为分隔符。

但是小部件使用功能性CSS类，您可以使用它们告诉小部件图像实际上是菜单项而不是分隔符。您可以为菜单项img添加一个名为ui-menu-item的类。所以你可以：

<ul id="menu">
  <li>hello</li>
  <li>
    <img class="ui-menu-item" src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/24-128.png" height=20 width=20 />
  </li>
  <li>
    <img class="ui-menu-item" src="https://cdn1.iconfinder.com/data/icons/material-core/24/cloud-download-128.png" height=20 width=20>
  </li>
</ul>

或者正如您所做的那样，您将img与div一起包裹在上述课程中。

另一种选择是覆盖小部件的_isDivider功能。但在你的情况下效率会降低。

Jquery-ui选择带图标的菜单 - 选择不起作用

1 个答案: