Question

我有一个<ul>的菜单。每个菜单项都是<li>，目前可点击。基于某些条件，我想禁用（使其不可点击）特定的<li>元素。我怎样才能做到这一点？我尝试使用disabled和<li>上的list-style:none属性。都没有奏效。有什么建议吗？

Answer 1

如果您仍想显示该项目，但仍无法点击该项目，并且看起来已禁用CSS：

CSS：

.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

HTML：

<li class="disabled">Disabled List Item</li>

此外，如果您使用的是BootStrap，则为此目的，它们已经有一个名为disabled的类。 See this example

Answer 2

我通常使用<li>来添加<a>链接。我禁用了这样的点击动作; 您可能不会包含<a>个链接，那么您将忽略我的帖子。

a.noclick       {
  pointer-events: none;
}

<a class="noclick" href="#">this is disabled</a>

Answer 3

如果由于任何原因不能选择，您可以尝试提供列表项类：

<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
...
</ul>

然后在你的css中：

li.one{display:none}/*hide first li*/
li.three{display:none}/*hide third li*/

Answer 4

$('li.two').hide()

在：

<ul class="lul">
    <li class="one">a</li>
    <li class="two">b</li>
    <li class="three">c</li>
</ul>

准备好文件。