当前位置:Gxlcms > html代码 > 点击div折叠

点击div折叠

时间:2021-07-01 10:21:17 帮助过:9人阅读

doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>测试title> 
    <style type="text/css">
        *{ margin:0; padding:0;}
        .menu{ width:100%;}
        .menu .item{ width:100%; height:auto; background-color: #fefefe;}
        .menu .item h1{ font-size:15px; width:100%; position:relative;}
        .menu .item h1 i{ display: inline-block; height:15px; width:10px; position:absolute; right:10px; top:0; background: url(images/right.png) no-repeat; background-size:10px auto;}
        .menu .item ul{ display: none;}
        .menu .item ul li{ list-style:none; color:#000; background-color: #fefefe; border-bottom:solid 1px #ededed; line-height: 32px; width:100%; position:relative;}
        .menu .item ul li p{ display: none;}        
        .menu .item.active h1 i{ display: inline-block; height:10px; width:15px; position:absolute; right:10px; top:3px; background: url(images/down.png) no-repeat; background-size:15px auto;}
        .menu .item ul li span.icon{display: inline-block; height:15px; width:10px; position:absolute; right:10px; top:0; background: url(images/right.png) no-repeat; background-size:10px auto;}
        .menu .item ul li.active span.icon{ display: inline-block; height:10px; width:15px; position:absolute; right:10px; top:3px; background: url(images/down.png) no-repeat; background-size:15px auto;}
        .menu .item.active ul{ display: block;}
        .menu .item.active ul li.active p{ display: block;}
    style>
head>
<body>
    <div class="menu">
        <div class="item">
            <h1>标题一<i>i>h1>
            <ul>
                <li>1<span class="icon">span>
                    <p>锋科技了束带结发历史的会计法落实到飞p>
                li>
                <li>2<span class="icon">span>
                    <p>锋科技了束带结发历史的会计法落实到飞p>
                li>
                <li>3<span class="icon">span>
                    <p>锋科技了束带结发历史的会计法落实到飞p>
                li>
            ul>
        div>
        <div class="item">
            <h1>标题二<i>i>h1>
            <ul>
                <li>1<span class="icon">span>
                    <p>锋科技了束带结发历史的会计法落实到飞p>
                li>
                <li>2<span class="icon">span>
                    <p>锋科技了束带结发历史的会计法落实到飞p>
                li>
                <li>3<span class="icon">span>
                    <p>锋科技了束带结发历史的会计法落实到飞p>
                li>
            ul>
        div>
        <div class="item">
            <h1>标题三<i>i>h1>
            <ul>
                <li>1<span class="icon">span>
                    <p>锋科技了束带结发历史的会计法落实到飞p>
                li>
                <li>2<span class="icon">span>
                    <p>锋科技了束带结发历史的会计法落实到飞p>
                li>
                <li>3<span class="icon">span>
                    <p>锋科技了束带结发历史的会计法落实到飞p>
                li>
            ul>
        div>
    div>
    <script type="text/javascript" src="js/jquery-1.7.min.js">script>
    <script type="text/javascript">
        jQuery(function(){
            $('.menu .item').each(function(){
                var flag=true;
                $(this).find('h1').on('click',function(){
                    if(flag){
                        $('.menu .item').removeClass('active');
                        $(this).parent('.item').addClass('active');                        
                        flag=false;
                    }else{
                        $(this).parent('.item').removeClass('active');
                        flag=true;
                    }
                });
            });
            $('.menu .item ul li').each(function(){    
                var flag=true;            
                $(this).on('click',function(event){
                    event.preventDefault();
                    event.stopPropagation();
                    if(flag){
                        $('.menu ul li').removeClass('active');
                        $(this).addClass('active');
                        flag=false;
                    }else{
                        $(this).removeClass('active');
                        flag=true;
                    }                                
                });
            });
        });
    script>
body>
html>

人气教程排行