Javascript 子列表的My.onclick函数仅在瞬间显示-Jquery

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

我正在使用.click函数隐藏所有子菜单，但它只显示了一小秒。我是一个超级新手，上周开始使用Jquery。这是我的密码：

Jquery：

$(function(){
    $("ul.sitback").hide();
    });




$(function() {
    $("li.dept").click(function(){
    $("ul.sitback").toggle();
     });
     });

HTML:

部门

下面是一个示例，说明如何仅使用CSS来实现这一点

HTML:

---

默认情况下，隐藏子列表。然后将它们设置为当父列表项悬停在上方时显示。只需添加一些CSS，您就可以使其更加“华丽”。观察过渡。可能是您正在寻找的flash。

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

HTML:

---

默认情况下，隐藏子列表。然后将它们设置为当父列表项悬停在上方时显示。只需添加一些CSS，您就可以使其更加“华丽”。观察过渡。可能就是您要找的闪光灯。

谢谢您，先生。成为Jquery的恶魔@greatbow您想要使用jQuery的解决方案吗？通过基本选择，

。单击

&

。添加类

，可以实现类似的效果。我确实在Jay中使用了Jquery，basic。单击并.toggle。但是我没有在下拉列表中找到答案（实际上是大约一年前），因为我忘记了在标记中错开嵌套列表。谢谢你提醒我。谢谢你，先生。成为Jquery的恶魔@greatbow您想要使用jQuery的解决方案吗？通过基本选择，

。单击

&

。添加类

，可以实现类似的效果。我确实在Jay中使用了Jquery，basic。单击并.toggle。但是我没有在下拉列表中找到答案（实际上是大约一年前），因为我忘记了在标记中错开嵌套列表。谢谢你提醒我。

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

<ul>
    <li>Item
        <ul>
            <li>SubItem</li>
            <li>SubItem</li>
            <li>SubItem</li>
            <li>SubItem</li>
        </ul>
    </li>
</ul>

li ul { display:none; }
li:hover ul { display:block; }