javascript - Jquery手风琴水平滚动？

Question

所以 JQuery UI Accordion 的默认行为是垂直打开和关闭。我所追求的是能够具有相同的功能，但只能水平而不是垂直。就像 web 应用程序右侧的面板默认情况下是打开的，但随后可以单击 div 左侧的空间来关闭和打开。有点像这里的示例 c2 中的内容：

http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizo​​ntal&sp=1

Answer 1

http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizo​​ntal-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;
             }

查询：

           $(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/