如何从右向左旋转折叠菜单幻灯片？
<HTML>
<HEAD>
<style>
#accordion {
width: 55%;
margin-left: 20px;
border: 1px solid blue;
}
.panel {
width: 100%;
}
.panel-heading {
height: 40px;
}
.panel-title {
height: 18px
}
.panel-title a {
float: right;
text-decoration: none;
padding: 0px 10px;
margin: 0px -10px;
}
.panel-body {
height: 10%;
}
.cont {
margin: 10px 00px;
}
</style>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<br>
<div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="cont">testing msesage</div>
</div>
</div>
</div>
</div>
</div>
</BODY>
</HTML>预计
最佳答案
下面是垂直滑动 Accordion 的代码。这是代码
working example : https://jsfiddle.net/yudi/qhnhnfjb/1/
HTML
<div id="accordion">
<div class="panel">
<div class="pink"></div>
<div class="panelContent p1"> <strong>Section 1 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</div>
</div>
CSS
#accordion {
list-style:none;
margin:30px 0;
padding:0;
height:270px;
width:980px;
margin:0 0 0 11px;
border-top:2px solid #000000;
border-bottom:2px solid #000000;
overflow:hidden;
}
#accordion .panel {
float:left;
display:block;
height:270px;
width:44px;
overflow:hidden;
color:#666666;
text-decoration:none;
font-size:16px;
line-height:1.5em
}
#accordion .panel.active {
width:848px
}
.panelContent {
padding:15px 15px 15px 55px;
height:240px;
width:778px;
}
.pink {
width:42px;
height:270px;
float:left;
background:url(../images/accordionSprite.png) no-repeat 4px 85px #f980a1;
border-right:2px solid #ffffff;
cursor:pointer
}
.last {
border:none
}
jquery
$(document).ready(function(){
activePanel = $("#accordion div.panel:first");
$(activePanel).addClass('active');
$("#accordion").delegate('.panel', 'click', function(e){
if( ! $(this).is('.active') ){
$(activePanel).animate({width: "44px"}, 300);
$(this).animate({width: "848px"}, 300);
$('#accordion .panel').removeClass('active');
$(this).addClass('active');
activePanel = this;
};
});
});
关于html - 从右向左旋转菜单幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36301695/