SlideToggle() on <tr> вызывает "прыжок"

При использовании функции jQuery slideToggle() для отображения/скрытия данных в новой строке в таблице это заставляет заикаться. Тем не менее, при использовании slideToggle() для отображения/скрытия <div> он работает очень плавно.

Может ли кто-нибудь сказать мне, почему это происходит?

Пример скрипта: http://jsfiddle.net/gLGUG/

Код jQuery:

$("tr").click(function () {
    $(".slideMe").slideToggle();
});

$(".slideMeDiv, button").click(function () {
    $(".slideMeDiv").slideToggle();
});

Разметка HTML:

<table>
    <tr>
        <td>One Row</td>
    </tr>
    <tr>
        <td>Click me</td>
    </tr>
    <tr class="slideMe">
        <td>SlideDOWN</td>
    </tr>
</table>
<br />
<button>Slide Div</button>

<div class="slideMeDiv">
    Slide me as well
</div>

Ответы

Ответ 1

Упомяните border="0" cellspacing="0" cellpadding="0" в table

<table width="100%" border="0" cellspacing="0" cellpadding="0">

это решит проблему прыжка

Вот файл jsFiddle

Также для эффекта скольжения вам нужно обернуть текст с помощью div и поместить div в сторону td

здесь приведен обновленный файл jsFiddle

Ответ 2

Я просто делаю это в своем js

$(document).ready(function(){
    $('tr').click(function(){
        $('.slideMe').slideToggle();
        $('.slideMe').css("display", "block")
    });
});

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

Ответ 3

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

попробуйте следующее:

function slideToggleRow(selector){
    $(selector).find("td").contents().slideToggle();
    $(selector).slideToggle();
}

используется следующим образом:

$("tr").click(function () {
    slideToggleRow(".slideMe");
});

Это должно работать, может быть, не идеально, но это лучшее решение, которое у меня есть. Если кто-нибудь найдет лучшее решение, сообщите мне.

Ответ 4

Для таблицы с измененной структурой:

   <table>
     <tr>
         <td>One Row</td>
     </tr>
     <tr>
         <td>Click me</td>
     </tr>
     <tr class="slideMe">
         <td>
             <div class="tdDiv">SlideDOWN</div>
         </td>
     </tr>
   </table>

(1) Убедитесь, что вы показываете как "slideMe" tr, так и "div" внутри "slideMe" tr td следующим образом:

$('.slideMe').show();
$('.slideMe').find('.tdDiv').show();

(2) Используйте этот код для переключения строки слайдов

 function toggleRow(selector){
   if($(selector).css('display') == "none"){
      $(selector).find('.tdDiv').slideDown(200);
      $(selector).slideDown(200);
   }
   else{
      $(selector).slideUp(200);
      $(selector).find('.tdDiv').slideUp(200);
   }
}

*** Удостоверьтесь, что div внутри tr td скользит вниз, прежде чем ваши слайды будут вниз.

*** Также убедитесь, что tr сместится до того, как div внутри tr td соскальзывает.

(3) Наконец, вы можете вызвать функцию toggleRow:

 toggleRow($('.slideMe'));