0

我为我的问题准备了一个jsFiddle：

截屏

为此，我采用了带有类别示例的 jQuery UI 菜单，并且刚刚VALUE="some_number"为每个元素添加了属性<LI>：

<ul id="menu">
  <li class="ui-widget-header"> Category 1 </li>
  <li value="1"> Option 1 </li>
  <li value="2"> Option 2 </li>
  <li value="3"> Option 3 </li>
  <li class="ui-widget-header"> Category 2 </li>
  <li value="4"> Option 4 </li>
  <li value="5"> Option 5 </li>
  <li value="6"> Option 6 </li>
</ul>

然后我尝试在单击按钮时在警报中检索并显示该值：

$("#menu").menu({
  items: '> :not(.ui-widget-header)'
});

$('#btn').button().click(function(ev) {
  ev.preventDefault();
  var value = $('#menu').val();
  // var value = $('#menu li').attr('value');
  alert('Selected menu value: ' + value);
});

但这里.val()似乎是一个糟糕的选择，我可能需要为此经历$("#menu")？

我还想知道，为什么在 jQuery 示例中悬停和项目选择时突出显示列表项 - 而不是在我的 jsFiddle 中？

更新：

clearshot66 建议的 HTML-select/optgroup/option 解决方法很好，但我想让我的 jQuery UI 菜单工作......我还在jQuery 论坛上发布了我的问题。

4

1 回答 1

1

尝试类似的东西，它会做你想要的更清洁的东西

另请注意，您的悬停不起作用，因为您需要在 CSS 上添加悬停属性

你的例子，不是我的： #menu li:hover{background-color:yellow;}

$('#btn').click(function() {
  var value = $('#menu').val();
  alert('Selected menu value: ' + value);
});
#menu{overflow:auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="menu" size='6'>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

<p><input type="button" id="btn" value="Show Selected" /></p>

否则，对于您的，因为它们是 li，您需要添加以下内容：

  • 在悬停css上显示颜色变化
  • 单击以显示颜色变化，然后取消上一个选择的颜色
  • 在单击事件上获取 li 文本，因为 li 没有值，所以$("#menu li").hasClass("active")在这种情况下基本上会找到具有颜色突出显示/类处于活动状态的 li，然后获取 .text() 值...

简而言之，带有 opt 组的代码在代码方面会更有效，并且可以设置 CSS 样式以看起来像您的示例。

于 2018-05-10T16:26:24.193 回答