怎么禁用ul中某些li的點擊事件

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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容