我的子列表的.onclick函数只显示一秒钟 - Jquery

时间:2015-08-19 14:59:41

标签: javascript jquery html list

我想制作一个嵌套在列表中的列表崩溃点击,一个部门的子菜单。真是华而不实。

我正在使用隐藏所有子菜单的.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>

1 个答案:

答案 0 :(得分:0)

以下是使用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; }

默认情况下隐藏子列表。然后将它们设置为在父列表项悬停时显示。你可以把它变得更加闪亮&#34;只需添加一些CSS。查看过渡。可能是你正在寻找的闪光灯。