Question

如何使用下拉手风琴的内容停止行背景颜色扩展。

我需要将该行留在原位并在所选行下方开始下拉列表。目前，当触发myaccordion时，行的样式会完全改变。

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<link href="~/Content/less/Custom/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />

功能：

<script>
$(function () {
    $(".myaccordion").accordion({
        active: false,
        collapsible: true
    });

});
</script>

表：

<div>
       <table class="students" style="border-spacing: 0 8px; border-collapse: separate;">
           @foreach (var item in Model.project)
               {
                   @:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">           
                   <td class="position">@item.Position</td>                        
                   <td class="myaccordion" style="width: 50%;padding-left: 10px;text-align: left;"><a href="#">@item.Name</a>
                   <div style="font-size:10px;">
                       @foreach (var name in Model.project1)
                           {   
                               <div style="-moz-border-radius: 15px;border-radius: 15px;width:100%;padding-top:10px">
                                   <span style="margin-left:1%; text-align: center">@name.Position</span>                                
                                   <span style="margin-left:8%; text-align: center">@name.Name</span>
                                   <span style="margin-left:10%; text-align: center">@name.Points</span>
                               </div>

                           }                            

                   </div>                                                            
              </td>
              <td style="width: 13%; text-align: center">@item.Points</td>                                               
              <td style="width: 10%; text-align: center;padding-right:10px">@item.Total</td>                              
              @:</tr>                                               
          }     
      </table>                 
 </div>

Answer 1

如果我理解正确，您希望展开下拉列表而不会在视觉上扩展父行。从技术上讲，没有作弊就没有办法实现这一目标。如果单元格中的内容高度变大，则td也开始增长，行也是如此。我想到了一个线高单元的解决方案。如果你在一个单元格中有更多的行，这显然不会起作用。

因此，首先将每个单元格的内容包装到div中，使用单元格的视觉属性 - 颜色，填充。其次，最好将“myaccordion”类分配给另一个div而不是td本身，这将为我们留出空间来为它添加一个包装器。

demo

我将每个td填充重置为0

td {
  padding:0px;
  vertical-align:top;
}

我在每个单元格中添加了div.wrap：

.wrap {
   background-color:grey; 
   height:25px; /**solution for one line cell***/
}

我用手风琴将特殊的div.wrap1添加到单元格中：

.wrap1 {
   position:relative;
}

.wrap1:before {    
  content: "";
  width: 100%;
  height: 25px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  background-color:grey;  
}

这些可以保证我们一行（高度：25px - 调整）的交叉高度和bg一致性。我不知道如何在每个单元格中处理多行，但可能只有js。

如何使用下拉手风琴的内容停止行背景颜色扩展

1 个答案: