Question

我希望有一个展开行的表格因此，可以“按下”表格的每一行，并展开行，并显示另一个“嵌入”表格我试图在JQuery手风琴之上实现这一点我尝试了以下但它根本不起作用：

<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>jQuery UI Accordion - Default functionality</title>  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">   
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  <link rel="stylesheet" href="/resources/demos/style.css">    
  <script>    
  $(function() {  
    $( "#accordion" ).accordion();  
  });  
  </script>  
</head>  
<body>  

<div id="accordion">  
  <!-- <h3>Section 1</h3> -->   
<table>  
  <tr><td><label>User</label></td><td><input type="text"/></td></tr>   
  <div>  
    <p>  
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer  
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit  
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut  
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.  
    </p>  
  </div>  
  <h3>Section 4</h3>  
  <div>  
    <p>  
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus  
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in  
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia  
    mauris vel est.  
    </p>  
  </div>  
</table>  
</div>  
</body>  
</html>

我使用了错误的小部件吗？我在这里搞砸了什么？

Answer 1

我在这里为您添加了手风琴样品。希望它对你有所帮助。感谢。

<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>jQuery UI Accordion - Default functionality</title>  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">   
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
 #table tbody .accordion:hover td:first-child, #applicantTable tbody .accordion.active td:first-child{ 
            border-left:3px solid #000; border-top:none; float:left;  overflow: hidden; padding-left: 5px; width:100%;
        }
#table tbody tr td{
    background-color:#ccc;
}
</style>
  <script>    
  $(function() {
    var $list = $('.list');    
    $list.find("tr").not('.accordion').hide();
    $list.find("tr").eq(0).show();
    $list.find(".accordion").click(function(){ 
    $(this).fadeTo("fast", 1) ;    
    $list.find('.accordion').not(this).siblings().fadeOut(500);
    $(this).siblings().fadeToggle(500);
    $(this).addClass('active');
    $list.find('.accordion').not(this).removeClass('active');
    $list.find('.accordion').not(this).css("opacity", 0.33);
        $list.find('.accordion').not(this).hover(function(){
            $(this).fadeTo("fast", 1);},
            function(){$(this).fadeTo("fast", 0.33);
        });
    });    
});  
  </script>  
</head>  
<body>  <table class="table list" id="table">
            <thead>
               <tr>
                    <th>Table</th>                  
                </tr>
            </thead>
            <tbody class="">
                <tr class="accordion">
                    <td>Table Row1 </td>
                </tr>
                <tr class="" style="border-left: 5px solid #000;"> 
                    <td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
                </tr>
            </tbody>

            <tbody>
                <tr class="accordion">
                    <td>Table Row 2</td>
                </tr>
                <tr class="" style="border-left: 5px solid #000;"> 
                    <td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
                </tr>
            </tbody>
            <tbody>
                <tr class="accordion">
                    <td>Table Row 3</td>
                </tr>
                <tr class="" style="border-left: 5px solid #000;"> 
                    <td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
                </tr>
            </tbody>

            <tbody>
                <tr class="accordion">
                    <td>Table Row 4</td>
                </tr>
                <tr class="" style="border-left: 5px solid #000;"> 
                    <td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
                </tr>
            </tbody>
</table>

</body>  
</html>

Demo

尝试使用JQuery构建具有可扩展行（嵌入式表）的表

1 个答案: