javascript - tabla - El código de jQuery para el menú desplegable en el que se puede hacer clic tiene errores. ¿Desea avisarnos?
tabla desplegable html (1)
Estoy desarrollando este enfoque de script jQuery para un menú desplegable del sitio web. Me he encontrado con un problema en el código que parece que no puedo pasar.
Información Adicional:
- El menú desplegable se expande al hacer clic en el elemento de menú del nivel raíz. [COMPLETAR]
- El menú desplegable se cierra al hacer clic en el mismo elemento de menú de nivel raíz. [COMPLETAR]
- El menú desplegable se cierra al hacer clic desde un elemento de menú de nivel raíz a otro. [COMPLETAR]
- El menú desplegable se cierra al hacer clic fuera del área del menú desplegable. [COMPLETAR]
- Admite múltiples menús desplegables desde el menú de nivel raíz. [COMPLETAR]
Esta es la secuencia de comandos actual con comentarios. El problema parece estar dentro de $(".is-open").hide(); . Si elimino esta línea del script, restaura el clic para abrir y hace clic para cerrar la funcionalidad, sin embargo, al hacer clic desde "DROP 1" a "DROP 2", los menús desplegables permanecerán abiertos.
<script>
// this is the function caller for click into drop down menu
$(document).ready(function(){
// this to function call targets the drop down menu by elements
$("li:has(ul)").click(function(){
// (IMPORTANT) code to hide existing open drop down menu before displaying new drop down menu
$(".is-open").hide();
// code to toggle menu from drop down ROOT
$(this).find(".is-open").toggle();
});// END: .click
});// END: .ready
//this script closes menu when clicked outside of drop down menu.
$(document).on("click", function(event){
var $triggerOn = $(".dropdown");
if($triggerOn !== event.target && !$triggerOn.has(event.target).length){
$(".is-open").hide();
}// END: if statement
});// END: .on
</script>
Aquí está el documento html completo.
<!DOCTYPE html>
<html>
<head>
<style>
li > ul{display:none;}
.show {display:block;}
.sub-nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
}
.sub-nav ul:after {content: ""; clear: both; display: block;}
li {float: left;}
.sub-nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
.sub-nav ul li:hover a {color: #fff;}
.sub-nav ul li a {
display: block;
padding: 20px 40px;
color: #757575;
text-decoration: none;
}
.sub-nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
.sub-nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
.sub-nav ul ul li a {padding: 15px 40px; color: #fff;}
.sub-nav ul ul li a:hover {background: #4b545f;}
</style>
</head>
<body>
<!-- START: nav -->
<div class="sub-nav">
<div class="container">
<ul>
<li class="active"><a href="#">ROOT 1</a></li>
<li><a href="#">ROOT 2</a></li>
<li><a href="#">ROOT 3</a></li>
<li><a href="#">ROOT 4</a></li>
<li><a href="#">ROOT 5</a></li>
<li class="dropdown"><a href="#">DROP 1</a>
<ul class="is-open">
<li><a href="#">SUB MENU 1</a></li>
<li><a href="#">SUB MENU 2</a></li>
<li><a href="#">SUB MENU 3</a></li>
<li><a href="#">SUB MENU 4</a></li>
</ul>
</li>
<li class="dropdown"><a>DROP 2</a>
<ul class="is-open">
<li><a href="#">SUB MENU LONG TITLE 1</a></li>
<li><a href="#">SUB MENU LONG TITLE 2</a></li>
<li><a href="#">SUB MENU LONG TITLE 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- END: nav -->
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// toggle drop down
$(document).ready(function(){
$("li:has(ul)").click(function(){
$(".is-open").hide();
$(this).find(".is-open").toggle();
});
});
// close menu when clicked outside of drop down menu
$(document).on("click", function(event){
var $triggerOn = $(".dropdown");
if($triggerOn !== event.target && !$triggerOn.has(event.target).length){
$(".is-open").hide();
}
});
</script>
Supongo que tengo agua para tu hipo . El problema es con este fragmento de código:
$(document).ready(function(){
$("li:has(ul)").click(function(){
$(".is-open").hide();
$(this).find(".is-open").toggle();
});
});
No importa lo que hagas, siempre cierra todo y lo abre. Agregar una condición como esta, lo hace funcionar:
$(document).ready(function(){
$("li:has(ul)").click(function(){
if ($(this).find(".is-open").is(":visible")) {
$(".is-open").hide();
} else {
$(".is-open").hide();
$(this).find(".is-open").toggle();
}
});
});
Salida: http://output.jsbin.com/jodevoropu
También cambié lo siguiente:
<li id="dropdown"><a href="#">DROP 1</a> <!-- Wrong -->
<li class="dropdown"><a href="#">DROP 1</a> <!-- Right -->
psst: ¡Ahora marca esto como completo! :P
- El menú desplegable se expande al hacer clic en el elemento de menú del nivel raíz. [COMPLETAR]
- El menú desplegable se cierra al hacer clic en el mismo elemento de menú de nivel raíz. [COMPLETAR]
- El menú desplegable se cierra al hacer clic desde un elemento de menú de nivel raíz a otro. [COMPLETAR]
- El menú desplegable se cierra al hacer clic fuera del área del menú desplegable. [COMPLETAR]
- Admite múltiples menús desplegables desde el menú de nivel raíz. [COMPLETAR]