javascript - 我的子列表的 .onclick 函数仅显示一瞬间 - Jquery

Question

我想制作一个嵌套在单击时折叠的列表中的列表，这是一个部门的子菜单。真正华丽的喜欢。

我使用 .click 函数隐藏了所有子菜单，但它只显示了一小会儿。我是一个 super 新手，上周开始使用 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>

Answer 1

下面是如何仅使用 CSS 实现此目的的示例。

Fiddle Here

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; }

默认情况下，您隐藏子列表。然后将它们设置为当父列表项悬停在上方时显示。您只需添加更多 CSS 即可使其变得“更加华丽”。查看转换。可能就是您正在寻找的闪光灯。