このjQueryアコーディオンコードの何が問題なのですか？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>jQuery UI Example Page</title> 
     <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" /> 
     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script> 
    </head> 

    <script> 
     $(document).ready(function(){ 
      $('#accordion').accordion(); 
     }); 
    </script> 

    <body> 

     <ul id="accordion"> 
     <li> 
     <a href="#">Header 1</a> 
     <div>Wow, look at all this content that can be shown or hidden with a simple click!</div> 
     </li> 
     <li> 
     <a href="#">Header 2</a> 
     <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpatligula. Integer 
     vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut  
     bibendum velit enim eu lectus. Suspendisse potenti. </div> 
     </li> 
     <li> 
     <a href="#">Header 3</a> 
     <div>Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. 
     Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.</div> 
     </li> 
    </ul> 

    </body> 
</html>

このコードは最初のイメージを返します。イメージを2番目のイメージのようにするにはどうすればよいですか？スタイリングは、私が唯一のタブが適切に第二の画像のようにこのjQueryアコーディオンコードの何が問題なのですか？

最初のイメージを整列させたい、しかし重要ではありません - > enter image description here

第二の画像 - > enter image description here

出典

2012-03-19 Mouse Hello

いくつかのCSSの男を使用してください！ – mVChr

@mVChrどうすればいいのか分かりませんが、私をここで助けてください...：p –

accordiを参照してください。うまくいく。あなたはちょうどいくつかのCSSが必要です。

ul { 
    margin: 20px; 
    border: 1px solid #00f; } 
li a { 
    padding: 5px; 
    background: #00f; 
    color: #fff; 
    text-align: center; 
    display: block; 
    text-decoration: none; 
    text-transform: uppercase; 
    outline: none; } 
li div { padding: 20px; }

DEMO HERE

出典

2012-03-19 05:07:37 Scott

は、次のスタイルとタブを追加します。あなたが希望として表示されます...

<style> 
#accordion li { 
    display:inline; 
    text-decoration: none; 
} 
</style>

はhttp://jsfiddle.net/neo108/yFeuJ/

出典

2012-03-19 04:56:20 neo108

このjQueryアコーディオンコードの何が問題なのですか？

答えて

関連する問題