<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>折叠面板</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> *{ margin:0; padding:0; list-style: none; } body{ background:#F8F8FF; } #flodbox{ width:500px; margin:0 auto; } .flodTitle{ padding:10px; border-bottom:1px solid #ddd; background: #696969; color:#ffffff; font-weight: bold; font-size:18px; cursor: pointer; position: relative; } .flodTitle .num{ margin-right:10px; background:red; } .flodTitle .titleBox{ display: inline-block; width:80%; } .flodTitle .titleRightBox{ display: inline-block; width:18%; height:100%; position: absolute; top:0; } .flodTitle .titleRightwraper{ position: absolute; top:50%; transform: translateY(-50%); width:100%; text-align: center; } .flodContentBox{ padding:0 10px; background:#DCDCDC; height:100%; } .flodContentBox>li{ padding:4px 0; border-bottom:1px solid #F8F8FF; } .flodContentBox>li:last-child{ border-bottom:0; } .rotateLeft{ transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */ -o-transform:rotate(-90deg); /* Opera */ } .flodItem .flodTitle .titleRightwraper>i{ transition: all 0.5s; -webkit-transition: all 0.5s; /* Safari */ } </style> </head> <body> <ul id="flodbox"> <li class="flodItem"> <div class="flodTitle"> <span class="titleBox">分类一</span> <span class="titleRightBox"> <span class="titleRightwraper"> <i class="glyphicon glyphicon-chevron-down pull-right"></i> <span class="num badge pull-right">53</span> </span> </span> </div> <ul class="flodContentBox"> <li>11</li> <li>12</li> <li>13</li> </ul> </li> <li class="flodItem"> <div class="flodTitle"> <span class="titleBox">分类一</span> <span class="titleRightBox"> <span class="titleRightwraper"> <i class="glyphicon glyphicon-chevron-down pull-right"></i> <span class="num badge pull-right">53</span> </span> </span> </div> <ul class="flodContentBox"> <li>11</li> <li>12</li> <li>13</li> </ul> </li> <li class="flodItem"> <div class="flodTitle"> <span class="titleBox">分类一</span> <span class="titleRightBox"> <span class="titleRightwraper"> <i class="glyphicon glyphicon-chevron-down pull-right"></i> <span class="num badge pull-right">53</span> </span> </span> </div> <ul class="flodContentBox"> <li>11</li> <li>12</li> <li>13</li> </ul> </li> </ul> <script> $(function(){ $("#flodbox>.flodItem>.flodTitle").click(function(){ if($(this).find("i").hasClass("rotateLeft")){ $(this).find("i").removeClass("rotateLeft"); $(this).parent().find(".flodContentBox").slideDown();; }else{ $(this).find("i").addClass("rotateLeft"); $(this).parent().find(".flodContentBox").slideUp(); } }) }) </script> </body> </html>
