使用jQuery的slidetoggle表行

Question

我正在嘗試在表格行之間滑動切換，但是這不起作用，我在上一個項目的div上使用了相同的模板，並且已經奏效。 但是，當我嘗試將相同的方法應用於表時，它無法按預期方式工作，它將在表行中將上一個div向上滑動。 但沒有顯示下一個“切換設置div”。

不幸的是，我必須使用表格行格式的現有代碼。 我已經分解了代碼，以表明您希望我能夠做到。 但是我不確定我編寫的HTML是否可以解決這個問題。

我的代碼在下面或查看我的jsFiddle

<table>   
   <tr class="editblocks">
     <td><p class="showpageblock">Office One</p></td>        
     <tr>
        <td><div class="togglesettings">Details for Office One</div></td>
     </tr>
    </tr>
    <tr class="editblocks">
     <td><p class="showpageblock">Office Two</p></td>        
      <tr>
        <td><div class="togglesettings">Details for Office two</div></td>
       </tr>
   </tr>
</table>

和我的jQuery如下所示：

$(document).ready(function() {

   $('.togglesettings').hide();
   $('.togglesettings:first').show();
    $('.showpageblock').on('click', function () {
        $(this).closest('.editblocks').siblings().find('.togglesettings').slideUp();
        $(this).next('.togglesettings').slideToggle();
        $(this).parent().siblings().children().next().slideUp();
        return false;
    }); 
 });

Answer 1

首先您的標記是無效的-你有一個tr另一個內部tr

<table>
    <tr class="editblocks">
        <td>
            <p class="showpageblock">Office One</p>
        </td>
    </tr>
    <tr>
        <td>
            <div class="togglesettings">Details for Office One</div>
        </td>
    </tr>
    <tr class="editblocks">
        <td>
            <p class="showpageblock">Office Two</p>
        </td>
    </tr>
    <tr>
        <td>
            <div class="togglesettings">Details for Office Two</div>
        </td>
    </tr>
</table>

然后

$(document).ready(function () {

    $('.togglesettings').hide();
    $('.togglesettings:first').show();
    $('.showpageblock').on('click', function () {
        var $t = $(this).closest('.editblocks').next().find('.togglesettings').stop(true).slideToggle();
        $('.togglesettings').not($t).stop(true).slideUp();
        return false;
    });


});

演示： 小提琴