Jquery手风琴水平卷轴
Jquery Accordion Horizontal Scroll?
因此JQuery UI Accordion的默认行为是垂直打开和关闭。我所追求的是能够拥有相同的功能,但只是水平的,而不是垂直的。就像web应用程序右侧的一个面板,默认情况下是打开的,但可以单击div左侧的空格来关闭和打开。有点像示例c2中的内容:
http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+水平&sp=1
http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/
检查上面的链接,它显示了一个简单的水平手风琴。
因为您只有一个div/panel。我修改了jquery,使其适用于一个div-panel
<ul id="accordion">
<li>
<img src="http://www.designchemical.com/lab/jquery/demo/images/section_1.png" />
<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.
</li>
</ul>
CSS:
#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;}
#accordion li {
float: left;
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}
#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}
#accordion li.active {
width: 450px;
}
Jquery:
$(document).ready(function(){
var flag=true;
$("#accordion li").click(function(){
if(flag==false)
{
$(this).animate({width: "50px"}, {duration:300, queue:false});
flag=true;
}
else{
$(this).animate({width: "450px"}, {duration:300, queue:false});
flag=false;
}
});
});
检查这个小提琴:http://jsfiddle.net/Kritika/5YECg/2/
相关文章:
- 手风琴可点击并悬停
- 响应动画手风琴不工作
- 允许表单元格内容水平展开
- 如何在c3js动态图表上进行平滑(水平)转换
- 如何只使用特定的表行构建简单的手风琴
- JQuery-停止手风琴链接关闭所有选项卡
- 如何设置第一个手风琴面板关闭
- 如何创建一个具有固定左右列和水平滚动的表
- 获得多个手风琴部分以保持开放
- 通过水平滚动将页眉固定到页面顶部
- 水平视差滚动从头开始-没有插件(jQuery)
- 使jquery ui手风琴水平
- jQuery-水平手风琴单击
- 如何将带有垂直子菜单的水平菜单转换为带有子菜单的垂直手风琴菜单
- Jquery手风琴水平卷轴
- 垂直手风琴从水平
- jQuery水平手风琴抖动
- 全页水平javascript手风琴
- 水平手风琴的全宽度(HTML, CSS, JQuery)
- 水平手风琴中的Jquery选择器