Question

这让我陷入了困境。所以我希望只能在页面上的下一个<table>上滑动切换。现在我已经尝试了一切，但它不起作用，我没有想法。

以下是代码的链接：

$(document).ready(function() {
    $('.toggle-step').on('click', function () {
        $(this).parent().next('table').slideToggle("fast");
        $(this).find('span').slideToggle(0);
    });
});

<div class="table-wrapper">
    <ul class="nav nav-pills">
        <li class="active"> 
            <a class="toggle-step">Toggle Table <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true" style="display: inline-block;"></span> <span class="glyphicon glyphicon-triangle-right" aria-hidden="true" style="display: none;"></span> </a>
        </li>
    </ul>

    <table>
        ...
    </table>
</div>

Answer 1

$(document).ready(function(e) {
    //on click in row1 class init toggle effect
    $(".row1").on("click", function(){
        //collapse content
        $("#parent1").collapse('toggle');
    });
    $("div.row2").click(function(){
        $("#parent2").collapse('toggle');
    });
    $("div.row3").click(function(){
        $("#parent3").collapse('toggle');
    });
    //on click in button or a return false
    $("button, a").on("click", function(){
         return false;
    });
});

因为链接的父级不是表的兄弟，所以需要修改DOM遍历。由于列表不是链接的父级，因此您需要使用$(this).closest('ul').next('table').slideToggle("fast");。

<强> Fiddle

切换下一张桌子

1 个答案: