Tengo el típico menú desplegable W3.CSS, pero quiero que esté deshabilitado hasta que esté listo:
<div id="A" class="w3-dropdown-hover" style="width: 100%;"> <button id="B" disabled class="w3-button" style="width: 100%;">Hover To Open</button> <div id="C" class="w3-dropdown-content w3-bar-block w3-border" style="width: 100%;"> <p>2B</p> <p>|| !2B</p> </div> </div> Como puede ver, puse la disabled en el button y se ve deshabilitado como era de esperar.
Pero el menú desplegable todavía aparece cuando paso el mouse. No quiero eso. Solo quiero que se abra el menú desplegable cuando el botón no está deshabilitado.
Obviamente, no puede poner el disabled en C , porque el disabled solo funciona en cosas como button s, input s, etc.
¿Dónde pongo a los disabled ?
Cuando esté listo en mi javascript, ¿cómo elimino / vuelvo a aplicar el disabled ? Con eso quiero decir, en cuál de "A", "B" o "C" aplico jQuery $("#A_Letter").prop('disabled', false);
Editar: lo único que se me ocurre es disabled el botón y cambiar momentáneamente la clase de "A" a w3-dropdown-click .
Aplicaría algo de css para 'deshabilitar' loseventos de puntero para que su navegador no detecte ninguna acción de desplazamiento:
<div id="A" class="w3-dropdown-hover" style="width: 100%; pointer-events: none;">Fragmento de demostración:
<link href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.css" rel="stylesheet"/> <div id="A" class="w3-dropdown-hover" style="width: 100%; pointer-events: none;"> <button id="B" disabled class="w3-button" style="width: 100%;">Hover To Open</button> <div id="C" class="w3-dropdown-content w3-bar-block w3-border" style="width: 100%;"> <p>2B</p> <p>|| !2B</p> </div> </div>Cuando esté listo en mi javascript, ¿cómo elimino / vuelvo a aplicar el deshabilitado?
Para alternar automáticamente ambos estados, podemos:
pointer-events:none a una clase CSS para que podamos usar toggleClass()prop para alternar el estado deshabilitado function toggle() { $("#A").toggleClass('disabled-hover'); $('#B').prop('disabled', (i, v) => !v); } .disabled-hover { pointer-events: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.css" rel="stylesheet"/> <div id="A" class="w3-dropdown-hover disabled-hover" style="width: 100%;"> <button id="B" disabled class="w3-button" style="width: 100%;">Hover To Open</button> <div id="C" class="w3-dropdown-content w3-bar-block w3-border" style="width: 100%;"> <p>2B</p> <p>|| !2B</p> </div> </div> <button onclick='toggle()'>Toggle Disabled</button>