Как я могу отключить определенный элемент LI внутри UL?

У меня есть меню, которое является <ul>. Каждый элемент меню <li> и в настоящее время доступен для клика. Исходя из некоторых условий, я хочу отключить (сделать его не кликабельным) конкретным элементом <li>. Как я могу это достичь? Я попытался использовать disabled аттрибут в стиле <li> и list-style:none. Ничего не получилось. Какие-либо предложения?

Ответ 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, у них уже есть класс с отключенным для этой цели. См. Этот пример.

Ответ 2

Обычно я использую <li> для включения ссылки <a>. Я отключил действие щелчка мышью так: Вы не можете включить ссылку <a>, тогда вы проигнорируете мой пост.

a.noclick       {
  pointer-events: none;
}

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

Ответ 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*/

Ответ 4

Использование JQuery: http://api.jquery.com/hide/

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

В:

<ul class="lul">
    <li class="one">a</li>
    <li class="two">b</li>
    <li class="three">c</li>
</ul>

По готовому документу.

http://jsfiddle.net/2dDSG/