HTML li ul下拉菜单层次结构

时间：2013-02-14 04:43:39

标签： javascript jquery html css

我创建了一个下拉菜单，我正在尝试使用jquery显示它的子菜单。 到目前为止，我已设法显示子菜单，但只能显示ID名称。

如何仅显示所点击的li项目的子菜单？ 我试过了：    $（本）。儿童（ “UL）” addclass（ “扩大”）显示（）。; 但是没有去。

<html>
<head>
    <script type="text/javascript" src="includes/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="includes/menu.js"></script></script>
    <link type="text/css" href="includes/menu.css" rel="stylesheet" />
</head>
<body>
    <div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;">
        <div id="menuJQ">
            <ul class="menuJQ">
                <li><span style="padding-top:9px;padding-left:5px;"><img src='includes/css/images/bblogo.png' onClick="window.location = 'index.php';">&nbsp;&nbsp;&nbsp;</span></li>
                <li class="parent"><a href="#"><span>Home</span></a></li>
                <li><a class="parent" href="#"><span>Product View</span></a>    
                    <div>
                        <ul>
                            <li><a href="#"><span>DevTask Search</span></a></li>
                            <li><a href="#"><span>Active Machines</span></a></li>
                        </ul>
                    </div>
                </li>
                <li class="parent"><a href="#"><span>Request Tool</span></a></li>   
                <li><a href="#" class="parent"><span>Search</span></a>
                    <div>
                        <ul id="sub1">
                            <li><a href="#"><span>DevTask Search</span></a></li>
                            <li><a href="#"><span>Active Machines</span></a></li>
                            <li><a href="#"><span>Integrity Query</span></a></li>
                            <li><a href="#"><span>Internal DevTasks</span></a></li>
                            <li><a href="#" class="parent"><span>3Results</span></a>
                                <div>
                                    <ul id="sub2">
                                        <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
                                        <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="3"><span>Issues for Stability Team</span></a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>


$(document).ready(function(){
    $('a.parent').click(function() {
        $("#sub1").addClass("expand").toggle("fast");
        var submenu_active = false;
    });

    var submenu_active = false;
     $('div#menuJQ ul ul').mouseenter(function() {
        submenu_active = true;      
     });

    $('div#menuJQ ul ul').mouseleave(function() {
        submenu_active = false;
        setTimeout(function() { 
            if (submenu_active === false) $('div#menuJQ ul ul').hide("fast");});
    });
});

1 个答案:

答案 0 :(得分：0)

试试这个：http://jsfiddle.net/sefbT/

您必须将脚本放在head或body不在html之外：

$(function() {
    $('#menuJQ > ul li').click(function(e) {
          e.preventDefault();
          $('ul:first', this).show();
    });
});

的CSS：

ul ul {
    display:none;
}

和这个html：

<!DOCTYPE html>


<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(function() {
            $('#menuJQ > ul li').click(function(e) {
                e.preventDefault();
                $('ul:first', this).show();
            });
        });
    </script>
</head>

<body>
    <div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;">
        <div id="menuJQ">
            <ul class="menuJQ">
                <li>123</li>
                <li class="parent"><a href="#"><span>Home</span></a>

                </li>
                <li><a class="parent" href="#"><span>Product View</span></a> 
                    <div>
                        <ul style='padding:0 0 0 50px;'>
                            <li><a href="#"><span>DevTask Search</span></a>

                            </li>
                            <li><a href="#"><span>Active Machines</span></a>

                            </li>
                        </ul>
                    </div>
                </li>
                <li class="parent"><a href="#"><span>Request Tool</span></a>

                </li>
                <li><a href="#" class="parent"><span>Search</span></a>

                    <div>
                        <ul id="sub1" style='padding:0 0 0 50px;'>
                            <li><a href="#"><span>DevTask Search</span></a>

                            </li>
                            <li><a href="#"><span>Active Machines</span></a>

                            </li>
                            <li><a href="#"><span>Integrity Query</span></a>

                            </li>
                            <li><a href="#"><span>Internal DevTasks</span></a>

                            </li>
                            <li><a href="#" class="parent"><span>3Results</span></a>

                                <div>
                                    <ul id="sub2" style='padding:0 0 0 50px;'>
                                        <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>

                                        </li>
                                        <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>

                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="3"><span>Issues for Stability Team</span></a>

                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
相关问题
最新问题