如何禁用UL内的特定LI元素？ [关闭]

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

我通常使用qazxsw poi来包含qazxsw poi链接。我禁用这样写的点击动作;您可能不包括<li>链接，那么您将忽略我的帖子。

<a>

<a>

Answer 3

使用CSS3：

a.noclick       {
  pointer-events: none;
}

如果由于任何原因这不是一个选项，您可以尝试给出列表项类：

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

然后在你的CSS中：

http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 4

使用JQuery：

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

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

在：

http://api.jquery.com/hide/

准备好文件。

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