JQueryアコーディオンでどうすればいいですか？ここから例を使用して

Question

：

http://jqueryui.com/demos/accordion/#custom-icons

私は（ULおよびLIのを使用しています）、静的なHTMLで次のようにしかし、私の現在のコードは、これらの矢印とまったく同じ作業アコーディオンを持つようにしたい：

<li id="ecartcategorieswidget-3" class="widget-1 widget-first widget sbg_widget Shop widget_ecartcategorieswidget"> 
    <h2 class="widgettitle sbg_title">Categories</h2> 
    <ul class="ecart_categories"> 
     <li><a href="http://">category1</a> 
     <ul class="children"> 
      <li><a href="http://">sub-category</a></li> 
      <li><a href="http://">sub-category</a> 
      <ul class="children"> 
       <li><a href="http://">sub-sub-category</a></li> 
      </ul></li> 
     </ul> 
     </li> 
     <li class="current><a href="http://">category2</a> 
     <ul class="children"> 
      <li><a href="http://">sub-category</a></li> 
      <li><a href="http://">sub-category</a> 
      <ul class="children"> 
       <li><a href="http://">sub-sub-category</a></li> 
      </ul></li> 
     </ul> 
     </li> 
    </ul> 
</li> 

私の上記のhtmlコードでJQueryのサンプルを動作させるにはどうすればよいのですか？category1とcategory2は、セクション1とセクション2のようになります。いずれかのカテゴリーをクリックすると、そのカテゴリー内のすべてのサブカテゴリーとサブカテゴリーが一緒にスライドします。それは文字通り2つのカテゴリを持つ1レベルのアコーディオンです。

ありがとうございます！

Answer 1

This articleは、リストをアコーディオンとしてスタイルを設定する方法について説明します。例はhttp://demos.net.tutsplus.com/020_jQueryUI/accordion-jquery-ui.htmです。

は基本的に、ちょうど次のスタイルをいじる：http://jsfiddle.net/william/WbTPk/1/：

ul.ecart_categories, ul.ecart_categories ul { list-style: none; margin: 0; } 
ul.ecart_categories { border-bottom: 1px solid #000E2E; } 
ul.ecart_categories li { border: 1px solid #000E2E; border-bottom: none; } 
ul.ecart_categories ul li { border: none; border-bottom: 1px solid #C2C8D1; color: #999; padding: 5px 10px; } 
ul.ecart_categories ul li:last-child { border-bottom: none; } 
ul.ecart_categories a.heading { 
    background: #F4FFF9; 
    color: #999; 
    display: block; 
    font-size: 18px; 
    line-height: 18px; 
    padding: 10px 5px; 
    text-decoration: none; 
} 
ul.ecart_categories a.heading:hover { background: #00B9D2; color: #fff; } 
ul.ecart_categories li.ui-accordion-selected a.heading, ul.ecart_categories li.current a.heading { background: #025185; color: #fff; } 
ul.ecart_categories li ul a { border-bottom: 1px solid #00B9D2; color: #025185; text-decoration: none; } 
ul.ecart_categories li ul a:hover { border-bottom: none; } 

が、それはあなたのマークアップにそれを適用するときにどのように見えるかを参照してください。