菜单（点击其他标题关闭当前内容）

最新推荐文章于 2024-07-18 16:42:56 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-07-18 16:42:56 发布

阅读量936

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/Guoyu1_/article/details/85760957

js 专栏收录该内容

83 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{font-size: 12px;padding: 100px;}
        .box{width: 500px;border-bottom: 1px solid #ccc;border-bottom:none;}
        .box h1{height: 30px;line-height: 30px;padding:0 10px;font-size: 16px;border: 1px solid #ccc;border-bottom: 1px solid gray;cursor: pointer;background: #ccc url(img/1.gif) no-repeat right -27px}
        .box h1:hover{background-color: #e3e2e2;}   /*用js显示光标经过时发生的事件*/
        .box h1.active{background-position: right 5px;}  /*点击后箭头变化*/
        /*.box h1:hover{background-color:  #e3e2e2;}  !*在i6下*!*/
        .box p{padding:10px;border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
    </style>
</head>
<body>
<div class="box">
        <h1>标题一</h1>
        <p>内容一</p>
        <h1>标题二</h1>
        <p>内容二</p>
        <h1>标题三</h1>
        <p>内容三</p>
        <h1>标题四</h1>
        <p>内容四</p>
        <h1>标题五</h1>
        <p>内容五</p>
</div>
<script>
    $(function () {
        $('.box p:not(:first)').hide();
        /*$('.box h1').hover(function () {         /!*i6浏览器下光标经过时发生的事件*!/
            $(this).addClass('hover');
        },function () {
            (this).removeClass();
        });*/
        $(".box h1:first").addClass("active");//第一个默认打开尖头朝上
        $('.box h1').click(function () {
            $(this).next('p').slideToggle() //显示内容
                   .siblings('p').slideUp(); //关闭内容
            $(this).toggleClass('active')
                .siblings('h1').removeClass("active");
        })
    });
</script>
</body>
</html>

效果图：