Отключенные выпадающие меню с использованием twitter bootstrap

Я использую разметку, чтобы отобразить выпадающее меню, используя Twitter Bootstrap.

<ul class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Menu item 1...</a></li>
            <li class="divider"></li>
            <li><a href="#">Menu item 2...</a></li>
            <li><a href="#">Menu item 3</a></li>
        </ul>
    </li>
</ul>

Я хочу иметь возможность сделать пункты меню отключенными, т.е. эффект наведения и, возможно, другое оформление текста, чтобы сделать отключенное состояние видимым для пользователя.

Каков наилучший способ сделать это? Есть ли существующий класс bootstrap css, который я могу добавить в элемент <li> или <a>?

Ответ 1

Вы можете подключить настраиваемый отключенный класс к тегу link a, который вы хотите отключить, и просто удалить действие по умолчанию с помощью preventDefault и таргетинг этого класса, например:

$(".disabled-link").click(function(event) {
  event.preventDefault();
});

Затем вы можете стилизовать все события из .disabled-link с помощью серого фона или любого стиля, который вам нравится;

CSS

a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
    background-color:#d9d9d9 !important;
    color:#aaa !important;
}

Демо

Ответ 2

При выводе кода для отключенного выпадающего меню, почему бы просто не использовать:

<li class='disabled'>
  <a href="#">Menu</a>
</li>

Вы всегда можете добавить карету назад, если хотите, чтобы она появилась.

Обновление:
Добавление Ссылка W3Schools

Ответ 3

Я предпочитаю это (МЕНЬШЕ):

/* Disable link */
a.disabled, 
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {  
  color: #999 ;
  cursor: default;
}
.dropdown-menu {
  a.disabled, 
  a.disabled:visited ,
  a.disabled:active,
  a.disabled:hover {  
    color: #999 ;
    cursor: default;
    background-color: white;
  }
}

Ответ 4

Чтобы отключить использование выпадающего списка:

$('.dropdown-toggle').addClass('disabled');

Чтобы включить его обратно:

$('.dropdown-toggle').removeClass('disabled');

Ответ 5

ДА, Bootstrap имеет предопределенный класс со всем необходимым стилем, который вам нужен. Вы можете просто добавить класс отключен в зависимости от того, какой <li> вы хотите

Ответ 6

Просто добавьте ответ Andres (не хватает репутации для добавления комментариев:(). Вам нужно вернуть false из обработчика событий или продолжить выполнение других обработчиков.

$(".disabled-link").click(function(event) {
  event.preventDefault();
  return false;
});

Ответ 7

Как и выше, вы можете использовать:

    li.disabled > a {
    color:#aaa !important;
    }

Таким образом, вы сохраняете один и тот же класс загрузки bootstrap для отключенных ссылок и внедряете javascript preventDefault() для отключения ссылки.

$(".disabled").click(function(event) {
event.preventDefault();
return false;
});

Ответ 8

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  **<a class="dropdown-item disabled" href="#">Disabled link</a>**
  <a class="dropdown-item" href="#">Another link</a>
</div>

Добавьте .disabled к элементам в раскрывающемся списке, чтобы оформить их как отключенные. Источник: www.getbootstrap.com