javascript - 将静态内容插入 jQuery UI 菜单小部件

Question

我需要在 jQuery UI 菜单中显示静态内容(文本和图像，真正的任意 HTML)。这不是菜单项。它不应是可点击的或参与任何其他菜单行为。

我发现添加类 ui-state-disabled 会禁用该元素，但有两个缺点:

1. 它仍然可以点击(导致菜单消失)。
2. 它会导致应用我需要撤消的样式。

有什么想法吗？

Here's a demo of the issue.我可以将“内容”添加到菜单中，但它看起来并没有改变。

Answer 1

我不得不把你的帖子通读几遍。要显示未被视为菜单项的内容，您可以调整 items 选项以排除某些内容。

工作示例:http://jsfiddle.net/Twisty/oy1qpfxL/3/

HTML

<ul id="menu" style="width: 200px;">
  <li class="ui-state-disabled">
    <div>Toys (n/a)</div>
  </li>
  <li>
    <div>Books</div>
  </li>
  <li>
    <div>Clothing</div>
  </li>
  <li class="disabled">
    <div class="no-click">
      <button>
        x
      </button>
      <img src="https://jqueryui.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png" />
    </div>
  </li>
  <li>
    <div>Electronics</div>
    <ul>
      <li class="ui-state-disabled">
        <div>Home Entertainment</div>
      </li>
      <li>
        <div>Car Hifi</div>
      </li>
      <li>
        <div>Utilities</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Movies</div>
  </li>
  <li>
    <div>Music</div>
    <ul>
      <li>
        <div>Rock</div>
        <ul>
          <li>
            <div>Alternative</div>
          </li>
          <li>
            <div>Classic</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Jazz</div>
        <ul>
          <li>
            <div>Freejazz</div>
          </li>
          <li>
            <div>Big Band</div>
          </li>
          <li>
            <div>Modern</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Pop</div>
      </li>
    </ul>
  </li>
  <li class="ui-state-disabled">
    <div>Specials (n/a)</div>
  </li>
</ul>

JavaScript

$("#menu").menu({
  items: "> li:not(.disabled)"
});

因此，这不会破坏 UI，并允许您在列表中拥有可以使用 HTML 的部分。另一种方法是向 all 添加一个类并将其设置为 items。