как я могу остановить расширение цвета фона строки с содержанием выпадающего аккордеона

Question

как я могу остановить расширение цвета фона строки с содержанием выпадающего аккордеона

0

как я могу остановить цвет фона строки, расширяя содержимое выпадающего аккордеона.

Мне нужно, чтобы строка оставалась на месте, а выпадающий список начинался под выбранной строкой. В настоящий момент стиль строки полностью изменяется, когда запускается 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>

user3288249 25 фев. 2014, в 13:34

Источник

Теги:

jquery

css

asp.net-mvc

1 ответ

Ещё вопросы

GL.awog · Accepted Answer · 2014-02-25T11-17-00.000Z

если я правильно понял, вы хотите, чтобы раскрывающийся список расширялся без визуального расширения родительской строки. Технически, нет способа добиться этого без обмана. если содержимое в ячейке становится больше по высоте, td также начинает расти, а также строка. Я подумал о решении для одной высоты линии. если у вас будет больше строк в одной ячейке, это не сработает.

Итак, сначала оберните содержимое каждой ячейки в div, с визуальными свойствами ячейки - цвет, отступы. Во-вторых, лучше назначить класс "myaccordion" другому div, а не самому td, это оставит нам пространство, чтобы добавить вокруг него обертку.

демонстрация

Я перезагружаю каждый td padding до 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;  
}

это гарантировало бы нам высоту cross-td и bg для однострочного ряда (высота: 25 пикселей - для настройки). Я не знаю, как работать с несколькими линиями в каждой ячейке, но, вероятно, только с js.

Спасибо, это работает, но у меня будет несколько записей в раскрывающемся списке. Но это будет выглядеть намного лучше.