2009-08-12 11 views
8

Używam jQuery slideToggle do wyświetlania ukrytego wiersza tabeli, ale ustawia styl wyświetlania na blok i muszę wyświetlić wiersz tabeli. jakieś pomysły, jak mógłbym to osiągnąć?JQuery slideToggle display type

góry dzięki

Odpowiedz

2

Można użyć wywołania zwrotnego, aby zmienić tę

$('#tableRowId').slideToggle(function(){ 
    $(this).css('display', 'table-row'); 
}); 
+6

Problem polega na tym, że ustawia styl wyświetlania na wiersz tabeli za każdym razem, gdy połowa czasu rzeczywiście ma być ukryta. – dmr

+0

Ten sam problem, musiał to potwierdzić. 'slideToggle()' pokazuje i ukrywa, to sprawia, że ​​nie może się ukryć. Sprawdź moją odpowiedź poniżej: – inorganik

0

To znany bug (również here). z jQuery slideToggle. Nie ma sposobu, aby użyć slideToggle i odpowiednio zachować styl wyświetlania. Możesz zastosować styl wyświetlania z wywołaniem zwrotnym, gdy animacja się zakończy, ale może nie osiągnąć pożądanego efektu.

+2

Warto zauważyć, że raport o błędzie mówi, że używanie metody .toggle() działa zgodnie z oczekiwaniami. – Marc

0

prostu dodać ten kod, aby funkcjonować

$(this).css('display','');

5

zorientowali się rozwiązanie tego problemu oddzwaniania - sprawdź czy ekran został ustawiony, aby zablokować (jeśli element został przełączony do pokazania) i jeśli tak, ustaw odpowiedni typ wyświetlania.

$('a.btn').on('click', function() { 
    $('div.myDiv').slideToggle(200, function() { 
     if ($(this).css('display') == 'block') $(this).css('display', 'table-row'); // enter desired display type 
    }); 
}); 
+0

zanotuj pytanie, zapytał, jak ustawić styl śródliniowy do wiersza tabeli, a nie do bloku śródliniowego -1 – redsquare

+0

@redsquare Zauważ mój kod - skomentowana sekcja z napisem "wpisz żądany typ wyświetlania". To dość słabe, aby ująć jedyne działające rozwiązanie tego problemu. – inorganik

+0

@ redsquare Edytowałem też odpowiedź. – inorganik

3

Rozwiązanie inorganik prawie działa. Ale musisz również ustawić wywołanie zwrotne step, aby zmienić block na table-row.

 $('row-selector-here').slideToggle({ 
      duration: 'fast', 
      step: function() { 
       if ($(this).css('display') == 'block') { 
        $(this).css('display', 'table-row'); 
       } 
      }, 
      complete: function() { 
       if ($(this).css('display') == 'block') { 
        $(this).css('display', 'table-row'); 
       } 
      } 
     });