jquery - 单击另一个手风琴时关闭手风琴

Question

写了这个 JQuery 手风琴，想在另一个被选中时关闭手风琴，我该怎么做......

$(function () {
    $("td.collapsable").find(".hidden").hide();
    $("table").click(function (event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ($target.closest("td").attr("colspan") > 1) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().find(".hidden").slideToggle();
        }
    });
});

Answer 1

这是我做的一个快速的东西，我不知道它是否可以应用于你的情况，因为你没有向我们展示代码，但有人可能会觉得它有用。可以通过多种方式实现相同的效果，我选择了这样。

jsFiddle 示例在这里

$('span').click(function(){
    $(this).addClass('active');
    $(this).siblings('.level1').slideDown(200);
    $(this).parent('li').siblings('li').children('span').removeClass('active');
    $(this).parent('li').siblings('li').children('.level1').slideUp(200);
});

Answer 2

看到这个： 演示

$(function () {
    $("td.collapsable").find(".hidden").hide();
    $("table").click(function (event) {
        event.stopPropagation();
        var $target = $(event.target).closest("tr").next().find("td.collapsable").find(".hidden");
        $("td.collapsable").find(".hidden:visible").not($target).slideUp();
        $target.slideToggle();
    });
});

Answer 3

只需将 a 添加.toggler到TR可点击的元素中：

LIVE DEMO

$(function () {
    $("td.collapsable").find(".hidden").hide();
    $(".toggler").click(function(){
         var myHiddenEl = $(this).next('tr').find('.hidden');
         var toggAnim   = myHiddenEl.css("display")=='none' ? "slideDown" : "slideUp" ;
         $('.hidden').slideUp();
         myHiddenEl[toggAnim]();
    });
});