1 问题描述

我的菜单是<ul> ，每个菜单项都是<li> ，目前都可以点击，代码如下：

<ul>
     <li><span class="tool-item">Tensorflow</span></li>
     <li><span class="tool-item">Kaldi</span></li>
     <li><span class="tool-item">Theano</span></li>
     <li><span class="tool-item">Keras</span></li>
     <li><span class="tool-item">Mxnet</span></li>
     <li><span class="tool-item">Caffe</span></li>
</ul>

根据某些需求和条件，想禁用特定的<li> 元素，但仍想显示该项目，要求只是无法点击。尝试在<li> 和列表样式中使用disabled属性，发现都没有用。

2 解决办法

如果仍想显示该项目，只是无法点击，可以使用CSS禁用该项目。

//CSS
.disabled {
    pointer-events:none; //使其不可点击
    opacity:0.6;         //使其样式变为不可用
}

<ul>
     <li class="disabled"><span class="tool-item">Tensorflow</span></li>
     <li class="disabled"><span class="tool-item">Kaldi</span></li>
     <li class="disabled"><span class="tool-item">Theano</span></li>
     <li class="disabled"><span class="tool-item">Keras</span></li>
     <li class="disabled"><span class="tool-item">Mxnet</span></li>
     <li class="disabled"><span class="tool-item">Caffe</span></li>
</ul>