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

Question

我需要静态内容(文本和图像，实际上是任意的HTML(出现在jQuery UI菜单中。这不是菜单项。它不应可单击或参与任何其他菜单行为。

我发现添加类ui-state-disabled禁用了该项目，但有两个缺点：

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

有什么想法吗？

这是该问题的演示。我可以将"内容"放入菜单中，但它看起来不会保持不变。

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 的部分。另一种方法是向所有类添加一个类并将其设置为 items .