javascript - pegajoso - menu que te sigue html
Javascript para detectar si el menú desplegable de un elemento seleccionado es visible (7)
En jQuery, para probar si algo está visible:
$(''something'').css(''display'')
Esto devolverá algo como ''bloque'', ''en línea'' o ''ninguno'' (si el elemento no se muestra). Esto es simplemente una representación del atributo CSS ''mostrar''.
Tengo un elemento seleccionado en un formulario, y quiero mostrar algo solo si el menú desplegable no está visible. Cosas que he intentado:
- En busca de eventos de clics, donde los clics impares significan que el menú desplegable es visible e incluso los clics significan que el menú desplegable no lo está. Omite otras formas en que el menú desplegable podría desaparecer (presionando escape, tabbing a otra ventana), y creo que esto podría ser difícil de obtener en todos los navegadores.
- Cambie los eventos, pero estos solo se activan cuando cambia el valor del cuadro de selección.
Ideas?
Este ejemplo rudimentario demuestra cómo hacerlo con setInterval. Comprueba una vez por segundo el estado de visualización de su menú de selección, y luego oculta o muestra un contenido. Funciona de acuerdo con la descripción de su problema, y no importa lo que oculte el menú de selección, mostrará ese contenido en consecuencia. En otras palabras, toggleDisplay () se configuró solo para demostrar eso.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script language="javascript" type="text/javascript">
var STECHZ = {
init : function() {
STECHZ.setDisplayedInterval();
},
setDisplayedInterval : function() {
STECHZ.isDisplayedInterval = window.setInterval(function(){
if ( document.getElementById( "mySelectMenu" ).style.display == "none" ) {
document.getElementById( "myObjectToShow" ).style.display = "block";
} else {
document.getElementById( "myObjectToShow" ).style.display = "none";
}
}, 1000);
},
isDisplayedInterval : null,
toggleDisplay : function() {
var mySelectMenu = document.getElementById( "mySelectMenu" );
if ( mySelectMenu.style.display == "none" ) {
mySelectMenu.style.display = "block";
} else {
mySelectMenu.style.display = "none";
}
}
};
window.onload = function(){
STECHZ.init();
}
</script>
</head>
<body>
<p>
<a href="#" onclick="STECHZ.toggleDisplay();return false;">Click to toggle display.</a>
</p>
<select id="mySelectMenu">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<div id="myObjectToShow" style="display: none;">Only show when mySelectMenu is not showing.</div>
</body>
</html>
Mantenga un registro del estado usando un varialbe de JavaScript. Lo llamaremos "openX".
onfocus = "openX = true" onblur = "openX = false" onchange = "openX = false"
Mi primera pregunta es: ¿por qué estás tratando de hacer esto? No puedo pensar en ninguna aplicación que muestre este comportamiento y no puedo pensar en una buena razón para que ocurra esta situación.
No digo que no tengas una buena razón, pero simplemente no sé lo que podría ser :).
No creo que haya apoyo directo. También puedes sentarte en la onblur de la selección: se llama cuando la selección pierde el foco.
Dependiendo de qué tan importante sea, podría intentar implementar su propio control o comenzando desde uno como un control de menú desplegable que es similar. Por lo general, a menos que sea crítico para su aplicación, no vale la pena hacerlo. Si decides seguir esta ruta, aquí hay una discusión sobre alguien que intenta hacerlo usando dojo como base:
http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/emulating-html-select
El contenido condicional, que es lo que preguntas, no es tan difícil. En el siguiente ejemplo, usaré jQuery para lograr nuestro objetivo:
<select id="theSelectId">
<option value="dogs">Dogs</option>
<option value="birds">Birds</option>
<option value="cats">Cats</option>
<option value="horses">Horses</option>
</select>
<div id="myDiv" style="width:300px;height:100px;background:#cc0000"></div>
Vincularemos un par de eventos para mostrar / ocultar #myDiv según el valor seleccionado de #theSelectId
$("#theSelectId").change(function(){
if ($(this).val() != "dogs")
$("#myDiv").fadeOut();
else
$("#myDiv").fadeIn();
});
así es como preferiría hacerlo. enfoque y desenfoque es donde está.
<html>
<head>
<title>SandBox</title>
</head>
<body>
<select id="ddlBox">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<div id="divMsg">some text or whatever goes here.</div>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
var ddlBox = document.getElementById("ddlBox");
var divMsg = document.getElementById("divMsg");
if (ddlBox && divMsg) {
ddlBox.onfocus = function() {
divMsg.style.display = "none";
}
ddlBox.onblur = function() {
divMsg.style.display = "";
}
divMsg.style.display = "";
}
}
</script>