Question

我没有做太多的编程，我一直在玩jquery UI组件，希望将其中的一些组合到我们的HTML输出中。我目前正试图看看手风琴如何在一张桌子上工作，并将一些代码拼凑在一起。我喜欢jquery提供的样式，但我只能为第一个表的第一行设置样式。请帮忙！

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Collapse content</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script>
   $(function() {
      $( "#accordion" ).accordion({
         collapsible: true
   });
   var $activity = $('.activity');
   $activity.find("tr").not('.accordion').hide();
   $activity.find("tr").eq(0).show();

   $activity.find(".accordion").click(function(){
      $activity.find('.accordion').not(this).siblings().fadeOut(500);
      $(this).siblings().fadeToggle(500);
   }).eq(0).trigger('click');
   });
</script>
</head>
<body>
<table class="activity">
   <tbody>
        <tr id="accordion" class="accordion">
          <td colspan="3">This is the header</td>
        </tr>
  <tr id="accordion">
    <td>Activity</td>
    <td>Description</td>
    <td>Role</td>
  </tr>
  <tr id="accordion">
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
    </tr>
</tbody>

<table class="activity">
<tbody>
    <tr id="accordion" class="accordion">
    <td colspan="3">This is the header</td>
    </tr>
    <tr>
    <td>Activity</td>
    <td>Description</td>
    <td>Role</td>
  </tr>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
  </tr>
</tbody>
</table>
</body>
</html>

Answer 1

ID必须是唯一的，在您的情况下，您要将accordion ID分配给多个元素。

改为使用类accordion，并将accordion删除为id：

$(function () {
    $(".accordion").accordion({
        collapsible: true
    });
    var $activity = $('.activity');
    $activity.find("tr").not('.accordion').hide();
    $activity.find("tr").eq(0).show();

    $activity.find(".accordion").click(function () {
        $activity.find('.accordion').not(this).siblings().fadeOut(500);
        $(this).siblings().fadeToggle(500);
    }).eq(0).trigger('click');
});

演示：http://jsfiddle.net/IrvinDominin/edqPG/

Answer 2

在Jquery UI源here中，id“accordion”适用于整个div。如果您希望能够对表格执行此操作，则应将您的ID应用于<table>而不是<tr>

jquery手风琴ui造型在第一个可扩展的桌子而不是另一个

2 个答案: