在 JQuery 菜单的 <li> 中单独激活 <span>

Question

我想知道是否可以使用 JQuery 菜单在 <li> 上有一个单独的元素 (<span>)，因为默认样式总是激活整个 <li> 我需要的是只激活用户 <span> 被 hover/focus 。这可能吗？有人可以指导我应该从哪里开始吗？

<ul id="menu">
  <li>A</li>
  <li>B
    <ul>
      <li><span>B - 1.1</span><span>B - 1.2</span></li>
      <li><span>B - 2.1</span><span>B - 2.2</span></li>
    </ul>
  </li>
  <li>C</li>
</ul>

参见 Fiddle Demo 同时激活 B - 1.1 和 B - 1.2。

Answer 1

这对你有用吗：

.ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span {background: #fff;}
.ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span:hover {background: transparent;}

Fiddle: https://jsfiddle.net/s7z9dpdd/

尝试了另一个版本以完全获取填充：

.ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span {background: #fff; display: inline-block; margin: -5px 0; padding: 5px 0;}
.ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span:hover {background: transparent;}

Fiddle: https://jsfiddle.net/fjmfk7qb/

最终杰作

.ui-menu { width: 150px; }
.ui-menu .ui-menu {width: auto;}
.ui-menu .ui-menu > .ui-menu-item {padding: 0; width: auto; white-space: nowrap;}
.ui-menu .ui-menu > .ui-menu-item > span {background: #fff; display: inline-block; padding: 5px 0;}
.ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span:hover {background: transparent;}

Fiddle: https://jsfiddle.net/6p8trnnn/

在 JQuery 菜单的 <li> 中单独激活 <span>

Separate activation of <span> inside <li> of JQuery Menu

html

javascript

css

jquery

menuitem