小贝子编程

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



我正在学习并尝试使用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>

提前感谢！

你的代码做得很好！它完全崩溃的事实是由于 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]：这个小提琴使用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')");

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium