点击展开显示折叠内容

全栈程序员-站长 • 2022年2月15日下午9:00 • 未分类 • 阅读 152

大家好，又见面了，我是全栈君。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        /*    折叠列表*/
        .Huifold .item {
            position: relative
        }

        .Huifold .item h4 {
            margin: 0;
            font-weight: bold;
            position: relative;
            border-top: 1px solid #fff;
            font-size: 15px;
            line-height: 22px;
            padding: 7px 10px;
            background-color: #eee;
            cursor: pointer;
            padding-right: 30px
        }

        .Huifold .item h4 b {
            position: absolute;
            display: block;
            cursor: pointer;
            right: 10px;
            top: 7px;
            width: 16px;
            height: 16px;
            text-align: center;
            color: #666
        }

        .Huifold .item .info {
            display: none;
            padding: 10px
        }
    </style>
</head>
<body>
<div style="width: 80%">
    <ul id="Huifold1" class="Huifold">
        <li class="item">
            <h4>标题<b>+</b></h4>
            <div class="info"> 内容<br>很多内容</div>
        </li>
        <li class="item">
            <h4>标题<b>+</b></h4>
            <div class="info"> 内容<br>很多内容</div>
        </li>
        <li class="item">
            <h4>标题<b>+</b></h4>
            <div class="info"> 内容<br>很多内容</div>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="http://www.videochat.com/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.videochat.com/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript">
    jQuery.Huifold = function(obj,obj_c,speed,obj_type,Event){
        if(obj_type == 2){
            $(obj+":first").find("b").html("-");
            $(obj_c+":first").show()}
        $(obj).bind(Event,function(){
            if($(this).next().is(":visible")){
                if(obj_type == 2){
                    return false}
                else{
                    $(this).next().slideUp(speed).end().removeClass("selected");
                    $(this).find("b").html("+")}
            }
            else{
                if(obj_type == 3){
                    $(this).next().slideDown(speed).end().addClass("selected");
                    $(this).find("b").html("-")}else{
                    $(obj_c).slideUp(speed);
                    $(obj).removeClass("selected");
                    $(obj).find("b").html("+");
                    $(this).next().slideDown(speed).end().addClass("selected");
                    $(this).find("b").html("-")}
            }
        })};
    $(function () {
        $.Huifold("#Huifold1 .item h4", "#Huifold1 .item .info", "fast", 2, "click"); /*5个参数顺序不可打乱，分别是：相应区,隐藏显示的内容,速度,类型,事件*/
    });

</script>
</html>

点击展开显示折叠内容