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

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

Answer 2

这应该是对

的简单调用

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

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

Answer 3

尝试类似的东西，我不知道你如何识别你的子菜单，但我只选择了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
});

有关$=的更多信息，请访问：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/

在链接点击上滑动显示/隐藏内容

3 个答案: