css - sencillo - menus desplegables en php

Elementos del menú desplegable desactivados usando twitter bootstrap

Question

Uso el marcado para mostrar un menú desplegable usando 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>

Quiero poder hacer que los elementos del menú aparezcan desactivados, es decir, sin efecto de desplazamiento y, probablemente, una decoración de texto diferente para que el usuario pueda ver el estado desactivado.

Cuál es la mejor manera de lograr esto? ¿Existe una clase de bootstrap css existente que pueda agregar al elemento <li> o <a> ?

Answer 1

Al enviar el código para un menú desplegable deshabilitado, ¿por qué no simplemente usar:

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

Siempre puede agregar el cursor si aún desea que aparezca.

Actualizar:
Agregar enlace W3Schools

Answer 2

Para desactivar el uso de la lista desplegable:

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

Para habilitarlo de nuevo:

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

Answer 3

Prefiero esto (MENOS):

/* 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;
}
}

Answer 4

Puede adjuntar una clase personalizada deshabilitada a su enlace de menú a etiqueta que desee deshabilitar y simplemente eliminar la acción predeterminada utilizando preventDefault y dirigiendo esa clase, de esta manera:

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

Luego puede .disabled-link todos los eventos desde el .disabled-link con un fondo gris o cualquier estilo que desee;

CSS

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

Demo

Answer 5

SÍ, Bootstrap tiene una clase predefinida con todo el estilo necesario que necesita. Simplemente puede agregar una clase deshabilitada a cualquier <li> que desee

Answer 6

Similar a lo anterior, puede usar:

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

De esta forma, mantendrá la misma clase predeterminada de arranque para los enlaces deshabilitados e implementará preventDefault () Javascript para deshabilitar el enlace.

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

Answer 7

Solo para agregar a Andres answer (no tengo suficiente reputación para agregar comentarios :(). Debe devolver false desde el controlador de eventos o puede continuar ejecutando otros manejadores.

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