<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="http://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> .Fold_demo .fold_item { position: relative } .Fold_demo .fold_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 } .Fold_demo .fold_item h4 b { position: absolute; display: block; cursor: pointer; right: 10px; top: 7px; width: 16px; height: 16px; text-align: center; color: #666 } .Fold_demo .fold_item .info { display: none; padding: 10px } .glyphicon { line-height: 22px; font-size: 10px; } </style> </head> <body> <ul id="Fold_left" class="Fold_demo"> <li class="fold_item"> <h4> <i class="glyphicon glyphicon-triangle-right pull-left"></i> 标题<b>+</b></h4> <div class="info"> 很多内容</div> <div class="info"> 很多内容</div> </li> <li class="fold_item"> <h4> <i class="glyphicon glyphicon-triangle-right pull-left"></i> 标题<b>+</b></h4> <div class="info"> 很多内容</div> </li> <li class="fold_item"> <h4> <i class="glyphicon glyphicon-triangle-right pull-left"></i> 标题<b>+</b></h4> <div class="info"> 很多内容</div> </li> </ul> </div> </body> </html> <script src="http://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script> <script> jQuery.Fold_demo = function (obj, obj_c, speed, obj_type, Event) { if (obj_type == 2) { $(obj+":first").find("b").html("-"); $(obj+":first").children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-bottom") $(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("+") $(this).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-right") } } else { if (obj_type == 3) { $(this).next().slideDown(speed).end().addClass("selected"); $(this).find("b").html("-") $(this).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-bottom") } else { $(obj_c).slideUp(speed); $(obj).removeClass("selected"); $(obj).find("b").html("+"); $(obj).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-right") $(this).next().slideDown(speed).end().addClass("selected"); $(this).find("b").html("-") $(this).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-bottom") } } }) } $(function () { $.Fold_demo("#Fold_left .fold_item h4", "#Fold_left .fold_item .info", "fast", 1, "click"); /*5个参数顺序不可打乱,分别是:相应区,隐藏显示的内容,速度,类型,事件*/ /*三种类型:分别对应的参数: 1 只打开一个,可以全部关闭 2 必须有一个打开 3 可打开多个 */ }); </script>
基础版本hui和bootstrap的折叠菜单
猜你喜欢
转载自blog.csdn.net/tcf_jingfeng/article/details/80241648
今日推荐
周排行