Jquery手风琴无序列表

时间:2013-11-26 15:26:12

标签: c# jquery html asp.net

我需要做下面的事情,我的UL是可折叠的,但因为UL是从ASP生成的:菜单控件我没有获得UL的ID,所以我需要以某种方式将手风琴添加到类中。有谁知道如何为类分配Jquery效果?

<script type="text/javascript">
    $(function(){
        $('#accordion').accordion();
    })
</script>
<ul id="accordion">
  <li>
     <h3><a href="#">header</a></h3>
     <div>
         Content goes here
     </div>
  </li>
  <li>
     <h3><a href="#">header</a></h3>
     <div>
         Content goes here
     </div>
  </li>
</ul>

生成的代码:

 <ul class="level1">
    <li><a class="level1 staticItem level1">
        <img src="/images/calculator.png" alt="" title="" class="icon" />Financial</a></li>
    <li><a class="level2 staticItem level2 selected" href="#" onclick="__doPostBack(&#39;Menu1&#39;,&#39;4\\6&#39;)">Address</a></li>
    <li><a class="level3 staticItem level3" href="/Controls/Financial/AddressBook.aspx" target="_blank">Address Book</a></li>
    <li><a class="level3 staticItem level3" href="/Controls/Financial/CustomerTypes.aspx" target="_blank">Customer Types</a></li>
    <li><a class="level1 staticItem level1">
        <img src="/images/container.png" alt="" title="" class="icon" />Container</a></li>
    <li><a class="level1 staticItem level1">
        <img src="/images/product.png" alt="" title="" class="icon" />Product</a></li>
</ul>

1 个答案:

答案 0 :(得分:1)

正如我在评论$('.className').accordion();中所述,将会有所作为。

这是一个例子:

HTML

<ul class="myclass">
  <li>
     <h3><a href="#">header</a></h3>
     <div>
         Content goes here
     </div>
  </li>
  <li>
     <h3><a href="#">header</a></h3>
     <div>
         Content goes here
     </div>
  </li>
</ul>

<强>的Javascript

   $(function(){
        $('.myclass').accordion();
    })

以下是Fiddle

的示例