幻灯片放映/隐藏链接上的内容点击

Question

我试图找到我想要做的解决方案，但没有完全匹配。最近我发现了一个标签手风琴。准确地说，我有一个包含链接的水平菜单，当点击链接时，会在链接行下方显示具有良好下滑动画的额外内容，并在单击相同链接时向上滑动（剩余页面内容在隐藏的内容被揭示，这是我想要的）。

问题是，当其他链接被点击时，它们也会显示额外的内容，但前一次点击的内容仍然可见。我希望较早的内容在新内容向下滑动之前滑动。这是可能的，如果是这样，我该如何去完成它？

这里是我的代码：

$(document).ready(function() { 
    // hides the menu as soon as the DOM is ready 
    $('#about').hide(); 
    $('#search').hide(); 
    $('#pages').hide(); 
    $('#links').hide(); 
    // toggles the menu on clicking the noted link 
    $('#toggleabout').click(function() { 
     $('#about').slideToggle(400); 
     return false; 
    }); 

    $('#togglesearch').click(function() { 
     $('#search').slideToggle(400); 
     return false; 
    }); 

    $('#togglepages').click(function() { 
     $('#pages').slideToggle(400); 
     return false; 
    }); 

    $('#togglelinks').click(function() { 
     $('#links').slideToggle(400); 
     return false; 
    }); 
}); 

Answer 1

这应该是一个简单的调用

$(".your-element-class").slideUp(); 

调用了slideDown就下单前关闭所有元素。但是，如果您遇到更多麻烦，请张贴一些代码并/或改进您遇到的具体问题的描述。

Answer 2

你可以把你的其他可滑动连接的阵列中。现在，当用户点击链接时，请检查您的数组以确保其他链接已折叠。

Answer 3

试着这么做，我不知道你是怎么确定的子菜单的，但我只挑了A的ID，并把-navcontent子菜单的ID后：

$("#mynav li a").click(function(e){ 
    e.preventDefault(); // Prevent jumping to top of page 
    $("[id$='-navcontent']").slideUp(); // Slide up all other -navcontent elements 
    $("#" + $(this).attr("id") + "-navcontent").slideToggle(); // Slidedown the current -navcontent element 
}); 

有关$=更多信息可以在这里找到：http://api.jquery.com/category/selectors/

$(document).ready(function() { 
// hides the menu as soon as the DOM is ready 
$('#about, #search, #pages, #links').hide(); 

// toggles the menu on clicking the noted link 
    $("#mynav input:button").click(function(e){ 

    e.preventDefault(); // Prevent jumping to top of page 
    var id = $(this).attr("id").replace("toggle", ""); 

    $("#mynav input:button").each(function(){ // Slide up all elements which are visible 
     var innerID = $(this).attr("id").replace("toggle", ""); 
     if(id == innerID) return; // Prevent current item to slideUp and slideDown directly after eachother, if is currentItem, only hide. 
     $("#" + innerID).slideUp(); 
    }); 
    $("#" + id).slideToggle(); // Slidedown the current -navcontent element 
}); 

}); 

现场演示：http://jsfiddle.net/Lcx88/2/