您的位置：首页 > 其它

JQ点击展开二级菜单

2016-08-24 09:31 375 查看
JQuery控制点击展开二级菜单，以下为测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

    <head> 

        <title>JQ点击展开二级菜单</title> 
<script class="jquery library" src="jquery-1.8.2.min.js" type="text/javascript"></script>

       <script>

            jQuery(function($){

                $("ul>li>a").click(function(){

                    $(this).next("ul").toggle().closest("li").siblings("li").children("ul").hide();

                }).next("ul").hide();

            });

        </script>

    </head> 

    <body> 

        <ul>

            <li>

                <a>

                    一级菜单

                </a>

                <ul>

                    <li>

                        隐藏的二级菜单项

                    </li>

                    <li>

                        隐藏的二级菜单项

                    </li>

                    <li>

                        隐藏的二级菜单项

                    </li>

                </ul>

            </li>

            <li>

                <a>

                    一级菜单

                </a>

                <ul>

                    <li>

                        隐藏的二级菜单项

                    </li>

                    <li>

                        隐藏的二级菜单项

                    </li>

                    <li>

                        隐藏的二级菜单项

                    </li>

                </ul>

            </li>

            <li>

                <a>

                    一级菜单

                </a>

                <ul>

                    <li>

                        隐藏的二级菜单项

                    </li>

                    <li>

                        隐藏的二级菜单项

                    </li>

                    <li>

                        隐藏的二级菜单项

                    </li>

                </ul>

            </li>

    </ul>

    </body> 

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航