Javascript 幻灯片放映/链接时隐藏内容单击

我试图找到一个解决我想做的事情的方法，但没有一个完全符合我的要求。我找到的最接近的东西是一个手风琴。确切地说，我有一个由链接组成的水平菜单，当单击链接时，链接行下方会显示额外内容，并带有一个漂亮的向下滑动动画，当单击同一链接时，链接行会向上滑动（当隐藏内容被显示时，页面内容的其余部分会移动，这正是我想要的）

问题是，当单击其他链接时，它们也会显示额外的内容，但先前单击的内容仍然可见。我希望在新内容下滑之前，之前的内容向上滑动。这可能吗？如果可能，我该如何着手实现

以下是我的代码：

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

---

您可以将其他可滑动链接放入阵列中。现在，当用户单击某个链接时，请检查您的阵列以确保其他链接已折叠。

这应该是对

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

---

在调用下一个元素的slideDown之前关闭所有元素。但是，如果您遇到更多问题，请发布一些代码和/或改进您对遇到的问题的描述。

尝试类似的方式，我不知道您如何识别子菜单，但我只是选择A的id，并在子菜单的id后放置一个

-navcontent

：

$("#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
});

有关

$=

的更多信息，请参见此处：

---

现场演示：

我已经发布了我当前使用的代码。我尝试了你的方法，但是它似乎只会在已经隐藏的内容上滑动，它忽略了对slideDown的调用。也许我做错了什么？忽略我前面说的，发生的是它陷入了slideUp/slideDown“循环”，不知道如何解释它。@Sovereign Anarchei，根据您的代码看一下这个JSFIDLE:。我为每个可以隐藏的元素添加了一个类，当我单击另一个项目时，我将它们全部隐藏（滑动），然后我调用slideToggle（）（实际上，你可以在此时调用slideDown）@SovereignAnarchei:我只是做了一个小的修改，允许在用户单击同一个按钮两次后再次隐藏内容：。注意“not”伪选择器。非常感谢，这真的很有帮助。我还在

.slideToggle（400）

之前使用了

.delay（500）

来平滑动画。我已经发布了我当前使用的代码。我尝试了你的方法，虽然在理论上它应该是如何工作的，但在实践中，当我点击链接时，什么也没有发生。也许我做错了什么？我做函数的方式和你得到的正好相反。在名称前面有一个带有

toggle

的链接，我在被切换的DIV的ID中添加了一个部分。我更新了我的代码。您必须将

#mynav li a

更改为您正在使用的任何结构。我尝试了不同的方法并获得了我想要的效果，谢谢您的帮助，我非常感谢。祝您好运！但是我写的代码可以用于任何数量的选项卡。而且，如果某个选项卡更改了ID或被删除/添加，则不需要再生成任何代码。

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

});