Question

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

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

它仍然可以点击（导致菜单消失）。
它会导致应用我需要撤消的样式。

有什么想法吗？

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)"
});

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

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

1 个答案: