CSS 如何禁用 UL 内的特定 LI 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15643505/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I disable a specific LI element inside a UL?
提问by user811433
I have a menu which is a <ul>. Each menu item is a <li>and currently clickable.
Based on some conditions, I want to disable (make it not clickable) a particular <li>element.
How can I achieve this? I tried using the disabledattribute on the <li>and list-style:noneas well. Neither worked. Any suggestions?
我有一个菜单是<ul>. 每个菜单项都是一个<li>当前可点击的。根据某些条件，我想禁用（使其不可点击）特定<li>元素。我怎样才能做到这一点？我也尝试disabled在<li>和上使用该属性list-style:none。都没有工作。有什么建议？
回答by Tony L.
If you still want to show the item but make it not clickable and look disabled with CSS:
如果您仍想显示该项目，但使其不可点击并使用 CSS 禁用：
CSS:
CSS：
.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6; //This grays it out to look disabled
}
HTML:
HTML：
<li class="disabled">Disabled List Item</li>
Also, if you are using BootStrap, they already have a class called disabled for this purpose. See this example.
此外，如果您正在使用 BootStrap，他们已经有一个名为 disabled 的类用于此目的。请参阅此示例。
回答by Ishihara
I usualy use <li>to include <a>link. I disabled click action writing like this;
You may not include <a>link, then you will ignore my post.
我通常<li>用来包含<a>链接。我禁用了这样的点击动作写作；您可能不包含<a>链接，那么您将忽略我的帖子。
a.noclick {
pointer-events: none;
}<a class="noclick" href="#">this is disabled</a>回答by gaynorvader
Using CSS3: http://www.w3schools.com/cssref/sel_nth-child.asp
使用 CSS3：http: //www.w3schools.com/cssref/sel_nth-child.asp
If that's not an option for any reason, you could try giving the list items classes:
如果出于任何原因这不是一个选项，您可以尝试提供列表项类：
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
...
</ul>
Then in your css:
然后在你的css中：
li.one{display:none}/*hide first li*/
li.three{display:none}/*hide third li*/
回答by Mibou
Using JQuery : http://api.jquery.com/hide/
使用 JQuery：http: //api.jquery.com/hide/
$('li.two').hide()
In :
在 ：
<ul class="lul">
<li class="one">a</li>
<li class="two">b</li>
<li class="three">c</li>
</ul>
On document ready.
在文件准备好。
