将静态内容插入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 。