Jquery Bir önceki tr'i daralt ve tıklandığında diğer tr'i genişlet

Question

tr'un altındaki ilk satır verisinin tıklanmasında 2 satır içeren bir tablo var. İkinci sıraya tıklandığında, ikinci satırın altındaki veriler, ilk satır verisi (daraltma) kapatılarak genişletilir. Sorun, birinci sıraya tıkladığımda ikinci sıra verisinin genişletilmiş durumda kalmasıdır. ilk satır verilerini de genişletirken. lütfen şimdi ikinci sıradaki verileri nasıl daraltmayı önerebilir misiniz? Aşağıda

kod parçacığı geçerli:

$('tr.header').click(function() { 
    $(this).nextUntil('tr.header').slideToggle(100, function() {}); 
    $(this).prevUntil('tr.header').slideUp(100, function() {}); 
}); 

HTML:

Yapabileceğin Ne

<table> 
    <tr class="header"> 
    <td colspan="2">Header1</td> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    </tr> 
    <tr class="header"> 
    <td colspan="2">Header2</td> 
    </tr> 
    <tr> 
    <td>date</td> 
    <td>data</td> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    </tr> 
</table> 

Answer 1

her genişletilmiş <tr> için bir sınıf ekleyebilir ve genişletilmiş her şeyi daraltmak için söz konusu sınıfını kullanarak hedef olduğunu Tıkladığınız satırın öncesine veya sonrasına bakılmaksızın.

Burada hiçbir şekilde tam bir çözüm olmayan bir demo var, ancak bunun nasıl çalışabileceği konusunda size bir fikir vermeniz yeterli olacaktır.

DÜZENLEME: İsteğinize bağlı olarak, üstbilgisi tıklanmışsa genişletilmiş bir bölümü daraltmak için kodu değiştirdim. Değiştirdiğim şey şudur: Bir bölüm genişletildiğinde, başlığı ek bir sınıf alır ve bir başlık tıklandığında, bölüm sınıfına sahip olsun veya olmasın, genişletilir veya daraltılır. Yine de, bu sadece bir konsept kanıtı ve tam bir çözüm değil, lütfen bunu kullanırken bunu aklınızdan çıkarmayın. Bu arada

$('tr.header').click(function() { 
 
    $('.expanded').slideUp(100, function() {}); 
 
    if (!$(this).hasClass('expanded-header')) { 
 
    $(this).nextUntil('tr.header').addClass('expanded').slideToggle(100, function() {}); 
 
    $('.expanded-header').removeClass('expanded-header'); 
 
    $(this).addClass('expanded-header'); 
 
    } else { 
 
    $(this).removeClass('expanded-header'); 
 
    } 
 
});

.content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="header"> 
 
    <td colspan="2">Header1</td> 
 
    </tr> 
 
    <tr class="content"> 
 
    <td>data</td> 
 
    <td>data</td> 
 
    </tr> 
 
    <tr class="content"> 
 
    <td>data</td> 
 
    <td>data</td> 
 
    </tr> 
 
    <tr class="header"> 
 
    <td colspan="2">Header2</td> 
 
    </tr> 
 
    <tr class="content"> 
 
    <td>date</td> 
 
    <td>data</td> 
 
    </tr> 
 
    <tr class="content"> 
 
    <td>data</td> 
 
    <td>data</td> 
 
    </tr> 
 
</table>

, buradan oluşturmaya çalıştığımız şey bir akordeon denilen ve some solutions available already quite vardır edilir ( bootstrap has one included saymıyorum). Bunun senin için bir yardımı olup olmadığını bilmiyorum, ama belki de tekerleği yeniden icat etmene gerek yok.