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;
    });


});

演示：Fiddle

使用jQuery滑动表格行

1 个答案: