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.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：

          #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/