Jquery 如何阻止行背景色随下拉式手风琴的内容扩展

如何阻止行背景色随下拉式手风琴的内容扩展

我需要该行保持原位，并在选定行下开始下拉列表。此时，当触发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>

$（函数（）{
$（“.myaccordion”）.accordion({
活动：错误，
可折叠：正确
});
});

表:

<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>

@foreach（Model.project中的var项）
{
@:           
@项目.职位
@foreach（Model.project1中的变量名）
{   
@姓名、职务
@名字，名字
@姓名、点数
}                            
@项目.要点
@项目.总计
@:                                               
}     

如果我理解正确，您希望在不直观地扩展父行的情况下展开下拉列表。从技术上讲，不作弊是不可能做到这一点的。如果单元格中的内容高度变大，则td开始增长，行也开始增长。我想到了一个单线高度单元的解决方案。如果你在一个细胞里有更多的细胞，这显然是行不通的

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

我将每个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;  
}

---

这将保证我们一行的交叉td高度和bg一致性（高度：25px-待调整）。我不知道如何在每个单元格中计算出多行，但可能只有使用js

谢谢，这很有效，但我会在下拉列表中有多个条目。但这看起来会好很多。