js手风琴

来源：互联网发布：windows消息关闭窗口编辑：程序博客网时间：2024/06/05 13:12

<head>
<title>itcast.cn的JQuery应用示例：弹出菜单</title>
<style type="text/css">
   li {
    list-style: none; /*使li前面的小圆点消失*/
    margin-left: 18px; /*让子菜单向右移动一段距离，达到缩进的效果*/
    display: none; /*让所有的子菜单都先隐藏*/
}
a{
text-decoration: none; /*让链接的下划线消失*/
}
</style>
</head>
<body>
    <ul>
        <a href="#" mce_href="#">我是菜单1</a>
        <li><a href="#" mce_href="#">我是子菜单1</a></li>
        <li><a href="#" mce_href="#">我是子菜单2</a></li>
    </ul>
    <ul>
        <a href="#" mce_href="#">我是菜单2</a>
        <li><a href="#" mce_href="#">我是子菜单3</a></li>
        <li><a href="#" mce_href="#">我是子菜单4</a></li>
    </ul>
    <script type="text/javascript" src="temp/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        //这里需要首先找到所有的主菜单
        //然后给所有的主菜单注册点击事件
        //找到ul中的节点
        var as = $("ul > a");
        as.click(function() {
            //这里需要找到当前ul中的li，然后让li显示出来
            //获取当前被点击的a节点
            var aNode = $(this);
            //找到当前a节点的所有li兄弟字节点
            var lis = aNode.nextAll("li");
            //让子节点显示或隐藏
            lis.toggle("show");
        });
      //除了点击之外的其它的li 全部隐藏
        //$(this).siblings().removeClass("hover").find(".menu").slideUp();
    });
    </script>
</body>
</html>

阅读全文

0 0