我想制作一个嵌套在列表中的列表崩溃点击,一个部门的子菜单。真是华而不实。
我正在使用隐藏所有子菜单的.click功能,但它只显示了一小段时间。我是一个超级新手,上周开始使用Jquery。这是我的代码:
Jquery的:
$(function(){
$("ul.sitback").hide();
});
$(function() {
$("li.dept").click(function(){
$("ul.sitback").toggle();
});
});
HTML:
<h3 align="center">Departments</h3>
<ul>
<a href><li class="dept1">+ Take Care Products</li></a>
<ul id="area1" class="sitback">
<a href><li>Men's Products</li></a>
<a href><li>Women's Products</li></a>
</ul>
<a href><li class="dept">+ Home Electronics</li></a>
<ul id="area" class="sitback">
<a href><li>Televisions</li></a>
<a href><li>Audio</li></a>
<a href><li>Portable</li></a>
</ul>
<a href><li class="dept">+ Computers and Video Games</li></a>
<ul id="area" class="sitback">
<a href><li>Video Games</li></a>
<a href><li>Home Computers</li></a>
</ul>
<a href><li class="dept" data-department="dept4">+ Books</li></a>
<ul id="area" class="sitback">
<a href><li>Fiction</li></a>
<a href><li>Non-Fiction</li></a>
<a href><li>Biography</li></a>
</ul>
<a href><li class="dept">+ Music</li></a>
<ul id="area" class="sitback">
<a href><li>Digital Download</li></a>
<a href><li>CDs</li></a>
</ul>
<a href><li class="dept">+ Experience Days</li></a>
<ul id="area" class="sitback">
<a href><li>Hot Airballoon Ride</li></a>
<a href><li>Track Days</li></a>
</ul>
</ul>
</div>
答案 0 :(得分:0)
以下是使用CSS实现此目的的一个示例。
HTML:
<ul>
<li>Item
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
</ul>
CSS:
li ul { display:none; }
li:hover ul { display:block; }
默认情况下隐藏子列表。然后将它们设置为在父列表项悬停时显示。你可以把它变得更加闪亮&#34;只需添加一些CSS。查看过渡。可能是你正在寻找的闪光灯。