如何在2列中拆分jQuery UI手風琴

我想在2列中拆分jQuery UI手風琴，但我無法弄清楚如何做到這一點。當我把如何在2列中拆分jQuery UI手風琴

div style="float:left; width:50%;"

手風琴不能正常工作了。我已經定製了這個演示http://jqueryui.com/demos/accordion/collapsible.html

有人可以幫助我嗎？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Accordion - Collapse content</title> 
    <script src="jquery-1.7.1.js"></script> 
    <script src="ui/jquery.ui.core.js"></script> 
    <script src="ui/jquery.ui.widget.js"></script> 
    <script src="ui/jquery.ui.accordion.js"></script> 
    <script> 
    $(function() { 
     $("#accordion").accordion({ 
      collapsible: true, 
      animated: false, 
      active: false, 
      autoHeight: false 
     }); 
    }); 
    </script> 
</head> 

<body> 
<div class="demo"> 
    <div id="accordion"> 

    <div style="float:left; width:50%;"> 
     <li><a href="#">TITLE 1</a> 
     <p>TEXT 1</p></li> 

     <li><a href="#">TITLE 2</a> 
     <p>TEXT 2</p></li> 
    </div> 

    <div style="float:left; width:50%;"> 
     <li><a href="#">TITLE 3</a> 
     <p>TEXT 3</p></li> 

     <li><a href="#">TITLE 4</a> 
     <p>TEXT 4</p></li> 
    </div> 

    </div><!-- End accordion --> 
</div><!-- End demo --> 

</body> 
</html>

來源

2012-03-26 young_coder

我已經成功地將手風琴分爲兩部分，儘管有點迂迴。可能有更好的方法來解決這個問題，但目前我還沒有意識到這一點。

<div id="accordion">  
    <h3><a href="#">Top Accordion Content Area</a></h3> 
     <div id="TopA"> 
      <div id="Top_A_left">  
       <p><b>Content for left section goes here</b></p> 
      </div> 

      <div id="Top_A_right"> 
       <p><b>Content for right section goes here</b></p> 
      </div> 

     </div> 
...[rest of the accordion code goes here]...

當然你可以調整你的CSS來給你你想要的佈局。我建議將ID添加到包含這兩個部分的DIV中，然後在CSS中配置一些樣式設置，否則可能會導致填充過多或不足。

的CSS：

#Top_A_Left 
{ 
    width:20%; 
    float:left; 
} 

#Top_A_Right 
{ 
    width:auto; 
    float:left; 
}

來源

2012-06-08 19:56:43 Ray

如何在2列中拆分jQuery UI手風琴

回答

相關問題