当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 菜单（点击其他标题关闭当前内容）

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

2020年07月14日  | 移动技术网IT编程  | 我要评论 
<!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>

效果图：

本文地址：https://blog.csdn.net/Guoyu1_/article/details/85760957

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网