Jquery手風琴水平滾動？

因此，JQuery UI Accordion的默認行爲是垂直打開和關閉。我所追求的是能夠具有相同的功能，但只有水平而不是垂直。就像web應用右側的面板一樣，默認情況下它是打開的，但是可以點擊div左側的空間關閉並打開。有點像什麼例子在這裏C2：Jquery手風琴水平滾動？

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

來源

2013-06-27 Mark

你可以使用jQuery手動編寫類似的東西。讓我知道，如果你想看看，或只是使用插件 –

雖然看起來有人發佈了一些有用的東西，但我會很樂意看到你提出的建議。 – Mark

例如[this]（http://jsfiddle.net/Zeaklous/nLgCe/）是一個涉及寬度（和高度，但你可以把它取出）的項目。通過一些工作，它可能是一個簡單而且可用的水平標籤，但是一個插件使得實現更容易 –

http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/

檢查上面的鏈接，它顯示了一個簡單的水平手風琴。

，因爲你只有一個DIV/panel.i已經修改了jQuery爲一個DIV /面板工作

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

來源

2013-06-27 17:52:25 Pbk1303

給出的例子存在的問題是它們似乎需要多個面板/ div。基本上我只是試圖打開和關閉一個div。請進一步的想法？非常感謝。 – Mark

這些似乎都沒有工作。進一步的想法？ – Mark

@Mark：我編輯了代碼，爲一個div/panel.is這是你想要的嗎？ – Pbk1303

Jquery手風琴水平滾動？

回答

相關問題