[英]Jquery Accordion Horizontal Scroll?
So the default behavior for JQuery UI Accordion is vertical open and close. 因此,JQuery UI Accordion的默认行为是垂直打开和关闭。 What I am after is being able to have the same functionality, but only horizontal rather than vertical. 我追求的是能够具有相同的功能,但是只有水平而不是垂直。 Like a panel on right side of web app that by default is open, but then one can click space on left of div to close and open. 就像Web应用程序右侧的面板一样,默认情况下该面板处于打开状态,但是您可以单击div左侧的空间来关闭并打开。 Kind of like what is in example c2 here: 有点像示例c2在这里:
http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizontal&sp=1 http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizontal&sp=1
http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/ http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/
check the above link,it shows a simple horizontal accordion. 检查上面的链接,它显示了一个简单的水平手风琴。
since you have only one div/panel.i have modified the jquery to work for one div/panel 由于您只有一个div / panel.i修改了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: 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: 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;
}
});
});
check this fiddle : http://jsfiddle.net/Kritika/5YECg/2/ 检查此小提琴: http : //jsfiddle.net/Kritika/5YECg/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.