如何禁用UL内的特定LI元素？

Question

我有一个菜单<ul>.每个菜单项都是a <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的类用于此目的.看这个例子.

Answer 2

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

a.noclick       {
  pointer-events: none;
}

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

Answer 3

使用CSS3：http://www.w3schools.com/cssref/sel_nth-child.asp

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

<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*/