slideToggle в строке таблицы

SlideToggle работает со строками таблицы, просто отстой.

Если у вас есть строка таблицы с высотой больше минимальной - вот так

<tr height="30%">

Затем slidetoggle будет плавно скользить вниз, пока не достигнет минимальной высоты... затем он сразу же исчезнет, ​​как вы использовали

$("#tr").hide();

Я сделал jsfiddle, демонстрирующий это на http://jsfiddle.net/BU28E/1/.

Лучшим решением для вас может быть использование таблицы, состоящей из div. Divs будут скользить вверх очень плавно. Я сделал еще один jsfiddle, демонстрирующий это на http://jsfiddle.net/BU28E/2/.

Что я делаю, так это помещаю один DIV в строку и устанавливаю заполнение TR и TD равным нулю. Затем я могу переключать div вместо строки:

<table>
  <tr style="padding: 0">
    <td style="padding: 0">
      <div id="slideme" style="display: none">
    </td>
  </tr>
</table>

$("#slideme").slideToggle();

Прекрасно работает. Я думаю, вы могли бы поместить DIV в каждый столбец и переключать их одновременно, если вам это нужно.

Я не знаю, считается ли этот обходной путь эффективным и эффективным, но он сработал для меня:

скажите, что вы хотите скользить по первой строке таблицы (этот код будет скользить вверх по заголовку):

$('table tr').first().children().slideUp();

так что, по сути, вы хотели бы скользить вверх по дочерним элементам Row вместо самой строки :)

Попробуйте использовать

$("#tr").fadeToggle(1000) 

для аналогичного эффекта

Вы можете сделать это, установив tr, который вы хотите сдвинуть, на display:none;, затем внутри этого tr добавьте td с colspan, равным количеству столбцов в вашей таблице, с div, который также установлен как display:none внутри этого td.

Весь контент, который вы хотите в скользящей строке, попадает в вышеупомянутый div, в результате чего tr скользит с анимацией.

Фрагмент ниже показывает это в действии.

$(".accordion-row").on("click",
  function() {
    var accordionRow = $(this).next(".accordion");
    if (!accordionRow.is(":visible")) {
      accordionRow.show().find(".accordion-content").slideDown();
    } else {
      accordionRow.find(".accordion-content").slideUp(function() {
        if (!$(this).is(':visible')) {
          accordionRow.hide();
        }
      });
    }
  });

.accordion-row {
  cursor: pointer;
}

.accordion {
  display: none;
  width: 100%;
}

.accordion-content {
  display: none;
}


/* Only used to remove undeeded padding added by bootstrap */
table.table.table-hover>tbody>tr>td {
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>
        th1
      </th>
      <th>
        th2
      </th>
      <th>
        th3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="accordion-row">
      <td>
        tr1 td1
      </td>
      <td>
        tr1 td2
      </td>
      <td>
        tr1 td3
      </td>
    </tr>
    <tr class="accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr1 accordion-content
        </div>
      </td>
    </tr>
    <tr class="accordion-row">
      <td>
        tr2 td1
      </td>
      <td>
        tr2 td2
      </td>
      <td>
        tr2 td3
      </td>
    </tr>
    <tr class=" accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr2 accordion-content
        </div>
      </td>
    </tr>
  </tbody>
</table>

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

http://jsfiddle.net/BU28E/622/

$("button").click(function(){
    $('#1').slideUp({
        duration: 1500,
        step: function(){
            var $this = $(this);
            var fontSize = parseInt($this.css("font-size"), 10);

            // if the real and css heights differ, decrease the font size until they match
            while(!sameHeight(this) && fontSize > 0){
                $this.css("font-size", --fontSize);
            }
        }
    });
});

function sameHeight(el){
    var cssHeight = el.style.height;
    cssHeight = parseFloat(cssHeight.substring(0,cssHeight.length-2));
    var realHeight = $(el).innerHeight();

    return isNaN(cssHeight) || realHeight - cssHeight < 2;
}

Эффект немного отличается тем, что содержимое сжимается, в отличие от обычного эффекта слайда.

< 2 в последней строке, возможно, потребуется скорректировать в зависимости от ваших границ (и, возможно, других факторов). Кроме того, это только демонстрирует скрытие содержимого. Аналогичный подход потребуется, чтобы позволить размеру шрифта увеличиваться по мере того, как строка скользит вниз. Это скорее доказательство концепции.

Редактировать: после попытки ответа Джонатана его метод выглядит немного чище.

Здесь у меня есть строка таблицы с классом view-converters, при нажатии на которую будут отображаться/скрываться все элементы div с классом TCConverters.

Мои строки выглядят так:

<tr><td><div class="TCConverters"><input type="button" value="b1"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b2"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b3"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b4"></div></td></tr>

Вот код, который запускается, когда вы нажимаете view-converters.

Я не делал ничего особенного с отступами ячеек таблицы.

Обратите внимание, что мы скрываем строку таблицы, когда закончим анимацию слайда.

$(".view-converters").click(function() {
    if(!$(".TCConverters:first").is(":visible")) {
        $(".TCConverters").parent().parent().show();
    }
    $(".TCConverters").slideToggle(200,function() { 
        if(!$(this).is(":visible")) {
            $(this).parent().parent().hide();
        }
    });
});

Это выглядит так:

Оригинал:

Здесь у меня есть строка таблицы с классом view-converters, при нажатии на которую будут отображаться/скрываться все строки с классом TCConverters:

Вы можете отрегулировать скорость, изменив начальное значение hacky и приращение в каждом .each.

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

Если вы действительно хотите уменьшить высоту строки, вы, вероятно, можете просто анимировать ее самостоятельно, заменив param.hide() на setTimeout, который уменьшает высоту, пока она не достигнет 0.

$(".view-converters").click(function() {
    var hacky = 50;
    if($('.TCConverters:first').is(':visible')) {
        $('.TCConverters').each(function() {
            var param = $(this);
            setTimeout(function() { param.hide(); },hacky);
            hacky += 5;
        });
    }
    else {
        $($('.TCConverters').get().reverse()).each(function() {
            var param = $(this);
            setTimeout(function() { param.show(); },hacky);
            hacky += 5;
        });
    }
});

Это выглядит так:

Вы можете сдвинуть переключатель строки в таблице. Пожалуйста, попробуйте это

Html-код таблицы:

<a href="#" >ok</a>
<table id="tbl">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>6</td><td>5</td></tr>
</table>

Код jQuery находится здесь, по щелчку «a» href таблица будет переключена.

$(document).ready(function() {
    $("a").click(function() {
        $('table tr td').slideToggle("medium");
    });           
});

Для конкретной строки индекса вы можете использовать $('table tr:eq(rowindex) td').