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

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 Example here

$('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

请参阅： DEMO

$(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

只需将.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]();
    });
});