尝试使用jQuery创建下拉菜单，但没有任何反应

时间：2020-01-29 19:27:32

标签： jquery drop-down-menu

我正在学习并尝试使用jQuery创建一个下拉菜单，以取得不错的效果。显然我在做错事，因为什么也没发生。我已经检查了其他类似的答案，但是显然我缺少一些东西，因为我仍然无法使它起作用。

我做了一个jsfiddle，希望对您有所帮助。 

$("#menu").hover(function() {
  $(this).find("ul").slideDown("slow");
}, function() {
  $(this).find("ul").slideUp("slow");
});
#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, 
#menu .sub-menu {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);
  background-color: rgba(71, 94, 97);
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  background-color: #444;
  border-width: 1px 1px 0;
  margin: 0 1em;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#menu, 
#toggle-menu {
  background-color: #09c;
}

#toggle-menu, 
#menu a {
  padding: 1em 1.5em;
}

#menu a {
  text-decoration: none;
}

#menu a:hover {
  background-color: #9ba2a3;
  color: #f0f4f5;
}

#menu .sub-menu {
  display: none;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .sub-menu a:hover {
  color: #444;
}

#toggle-menu .drop-icon, 
#menu li label.drop-icon {
  position: absolute;
  right: 1.5em;
  top: 1.25em;
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  text-align: center;
  background-color: rgba(0, 0, 0, .125);
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 255, 255, .75);
}

#menu .drop-icon {
  line-height: 1;
}


@media only screen and (max-width: 64em) and (min-width: 52.01em) {
  #menu li {
    width: 33.333%;
  }

  #menu .sub-menu li {
    width: auto;
  }
}

@media only screen and (min-width: 52em) {
  #menu .main-menu {
    display: block;
  }

  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: inline-block;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
  }

  #menu .sub-menu li {
    float: none;
  }

  #menu .sub-menu {
    border-width: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 12em;
    z-index: 3000;
  }

  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 1px;
  }

  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu">
	  <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label>
	  <input type="checkbox" id="tm">
	  <ul class="main-menu clearfix">
	    <li><a href="#">Inicio</a></li>
	    <li><a href="#">Por habitación
	        <span class="drop-icon">▾</span>
	        <label title="toggle drop-down" class="drop-icon" for="PorHabitacion">▾</label>
	      </a>
	      <input type="checkbox" id="PorHabitacion">
	      <ul class="sub-menu">
	        <li><a href="#">Cocina</a></li>
	        <li><a href="#">Sala</a></li>
	        <li><a href="#">Comedor</a></li>
	        <li><a href="#">Balcón</a></li>
	        <li><a href="#">Baño</a></li>
	        <li><a href="#">Home-office</a></li>
	        <li><a href="#">Dormitorio
	            <span class="drop-icon">▾</span>
	            <label title="toggle drop-down" class="drop-icon" for="Dormitorios">▾</label>
	          </a>
	          <input type="checkbox" id="Dormitorios">
	          <ul class="sub-menu">
	            <li><a href="#">Principal</a></li>
	            <li><a href="#">Nursery</a></li>
	            <li><a href="#">Infantil</a></li>
	            <li><a href="#">Juvenil</a></li>
	          </ul>
	        </li>

	        <li><a href="#">Exterior
	            <span class="drop-icon">▾</span>
	            <label title="toggle drop-down" class="drop-icon" for="Exterior">▾</label>
	          </a>
	          <input type="checkbox" id="Exterior">
	          <ul class="sub-menu">
	            <li><a href="#">Jardín</a></li>
	            <li><a href="#">Balcón</a></li>
	            <li><a href="#">Terraza</a></li>
	          </ul>
	        </li>
	      </ul>
	    </li>

	    <ul>
	      <li><a href="#">Por tipo
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="PorTipo">▾</label>
	        </a>
	        <input type="checkbox" id="PorTipo">
	        <ul class="sub-menu">
	          <li><a href="#">Departamento</a></li>
	          <li><a href="#">Casa</a></li>
	          <li><a href="#">Loft</a></li>
	          <li><a href="#">Oficina</a></li>
	          <li><a href="#">Hotel</a></li>
	          <li><a href="#">Comercio</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Decoración
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="Decoracion">▾</label>
	        </a>
	        <input type="checkbox" id="Decoracion">
	        <ul class="sub-menu">
	          <li><a href="#">Iluminación</a></li>
	          <li><a href="#">Electrodomésticos</a></li>
	          <li><a href="#">Menaje</a></li>
	          <li><a href="#">Muebles</a></li>
	          <li><a href="#">Objetos</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Ideas y Guías
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="Ideas">▾</label>
	        </a>
	        <input type="checkbox" id="Ideas">
	        <ul class="sub-menu">
	          <li><a href="#">Proyectos DIY</a></li>
	          <li><a href="#">Revestimientos</a></li>
	          <li><a href="#">Pintura</a></li>
	          <li><a href="#">Mudanza</a></li>
	          <li><a href="#">Organización</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Fechas especiales
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="FechasEsp">▾</label>
	        </a>
	        <input type="checkbox" id="FechasEsp">
	        <ul class="sub-menu">
	          <li><a href="#">Navidad</a></li>
	          <li><a href="#">Halloween</a></li>
	          <li><a href="#">Bodas</a></li>
	          <li><a href="#">Cumpleaños</a></li>
	          <li><a href="#">San Valentín</a></li>
	        </ul>
	      </li>
	    </ul>

	  </ul>
	</nav>

谢谢！

1 个答案:

答案 0 :(得分：0)

您的代码运行良好！它完全崩溃的事实是由于UL列表的选择。 如果不希望这样，可以通过将选择范围限制为第一个UL子级来替换它，如下所示。

子菜单同样适用。

$("#menu").hover(function() {
  $(this).children('ul').first().slideDown("slow");
}, function() {
  $(this).children('ul').first().slideUp("slow");
});

$("li:has('label.drop-icon')").hover(function() {
  $(this).children('ul').first().slideDown("slow");
}, function() {
  $(this).children('ul').first().slideUp("slow");
});
#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, 
#menu .sub-menu {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);
  background-color: rgba(71, 94, 97);
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  background-color: #444;
  border-width: 1px 1px 0;
  margin: 0 1em;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#menu, 
#toggle-menu {
  background-color: #09c;
}

#toggle-menu, 
#menu a {
  padding: 1em 1.5em;
}

#menu a {
  text-decoration: none;
}

#menu a:hover {
  background-color: #9ba2a3;
  color: #f0f4f5;
}

#menu .sub-menu {
  display: none;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .sub-menu a:hover {
  color: #444;
}

#toggle-menu .drop-icon, 
#menu li label.drop-icon {
  position: absolute;
  right: 1.5em;
  top: 1.25em;
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  text-align: center;
  background-color: rgba(0, 0, 0, .125);
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 255, 255, .75);
}

#menu .drop-icon {
  line-height: 1;
}


@media only screen and (max-width: 64em) and (min-width: 52.01em) {
  #menu li {
    width: 33.333%;
  }

  #menu .sub-menu li {
    width: auto;
  }
}

@media only screen and (min-width: 52em) {
  #menu .main-menu {
    display: block;
  }

  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: inline-block;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
  }

  #menu .sub-menu li {
    float: none;
  }

  #menu .sub-menu {
    border-width: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 12em;
    z-index: 3000;
  }

  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 1px;
  }

  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu">
	  <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label>
	  <input type="checkbox" id="tm">
	  <ul class="main-menu clearfix">
	    <li><a href="#">Inicio</a></li>
	    <li><a href="#">Por habitación
	        <span class="drop-icon">▾</span>
	        <label title="toggle drop-down" class="drop-icon" for="PorHabitacion">▾</label>
	      </a>
	      <input type="checkbox" id="PorHabitacion">
	      <ul class="sub-menu">
	        <li><a href="#">Cocina</a></li>
	        <li><a href="#">Sala</a></li>
	        <li><a href="#">Comedor</a></li>
	        <li><a href="#">Balcón</a></li>
	        <li><a href="#">Baño</a></li>
	        <li><a href="#">Home-office</a></li>
	        <li><a href="#">Dormitorio
	            <span class="drop-icon">▾</span>
	            <label title="toggle drop-down" class="drop-icon" for="Dormitorios">▾</label>
	          </a>
	          <input type="checkbox" id="Dormitorios">
	          <ul class="sub-menu">
	            <li><a href="#">Principal</a></li>
	            <li><a href="#">Nursery</a></li>
	            <li><a href="#">Infantil</a></li>
	            <li><a href="#">Juvenil</a></li>
	          </ul>
	        </li>

	        <li><a href="#">Exterior
	            <span class="drop-icon">▾</span>
	            <label title="toggle drop-down" class="drop-icon" for="Exterior">▾</label>
	          </a>
	          <input type="checkbox" id="Exterior">
	          <ul class="sub-menu">
	            <li><a href="#">Jardín</a></li>
	            <li><a href="#">Balcón</a></li>
	            <li><a href="#">Terraza</a></li>
	          </ul>
	        </li>
	      </ul>
	    </li>

	    <ul>
	      <li><a href="#">Por tipo
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="PorTipo">▾</label>
	        </a>
	        <input type="checkbox" id="PorTipo">
	        <ul class="sub-menu">
	          <li><a href="#">Departamento</a></li>
	          <li><a href="#">Casa</a></li>
	          <li><a href="#">Loft</a></li>
	          <li><a href="#">Oficina</a></li>
	          <li><a href="#">Hotel</a></li>
	          <li><a href="#">Comercio</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Decoración
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="Decoracion">▾</label>
	        </a>
	        <input type="checkbox" id="Decoracion">
	        <ul class="sub-menu">
	          <li><a href="#">Iluminación</a></li>
	          <li><a href="#">Electrodomésticos</a></li>
	          <li><a href="#">Menaje</a></li>
	          <li><a href="#">Muebles</a></li>
	          <li><a href="#">Objetos</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Ideas y Guías
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="Ideas">▾</label>
	        </a>
	        <input type="checkbox" id="Ideas">
	        <ul class="sub-menu">
	          <li><a href="#">Proyectos DIY</a></li>
	          <li><a href="#">Revestimientos</a></li>
	          <li><a href="#">Pintura</a></li>
	          <li><a href="#">Mudanza</a></li>
	          <li><a href="#">Organización</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Fechas especiales
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="FechasEsp">▾</label>
	        </a>
	        <input type="checkbox" id="FechasEsp">
	        <ul class="sub-menu">
	          <li><a href="#">Navidad</a></li>
	          <li><a href="#">Halloween</a></li>
	          <li><a href="#">Bodas</a></li>
	          <li><a href="#">Cumpleaños</a></li>
	          <li><a href="#">San Valentín</a></li>
	        </ul>
	      </li>
	    </ul>

	  </ul>
	</nav>

[EXTRA]：此fiddle使用hoverIntent作为jQuery hover（）方法的替代方法，以避免快速的事件交互，从而阻止用户定位子菜单。

$("body").hoverIntent(function() {
  $(this).children('ul').first().slideDown("slow")},function() {
  $(this).children('ul').first().slideUp("slow");
},'#menu');

$("#menu").hoverIntent(function() {
  $(this).children('ul').first().slideDown("slow")},function() {
  $(this).children('ul').first().slideUp("slow");
},"li:has('label.drop-icon')");
相关问题
最新问题