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

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

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

这里是我的代码：

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

来源

2011-11-28 Sovereign Anarchei

这应该是一个简单的调用

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

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

来源

2011-11-28 08:05:26 Godwin

我已经发布我目前使用的代码。我尝试了你的方法，但它似乎只会在已经隐藏的内容上滑动，它忽略了对slideDown的调用。也许我做错了什么？ –

忽略我刚才所说的，会发生什么，它会卡在slideUp/slideDown'循环中，不知道如何解释它。 –

@Sovereign Anarchei，根据你的代码来看看这个jsfiddle：http://jsfiddle.net/Lcx88/。我为每个可以隐藏的元素添加了一个类，并且当我单击另一个元素时隐藏（滑动）了它们，然后我调用了slideToggle（）（真的，您可以在此处调用slideDown） – Godwin

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

来源

2011-11-28 08:05:13

试着这么做，我不知道你是怎么确定的子菜单的，但我只挑了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/

来源

2011-11-28 08:09:47 Niels

我已经发布了我目前使用的代码。我尝试了你的方法，并且理解它在理论上应该如何工作，但实际上在我点击链接时没有发生任何事情。也许我做错了什么？ –

我做出这个功能的方式是相反的。你在名称前面加上了'toggle'的链接，在那里我添加了一部分到被切换的DIV的ID。我更新了我的代码。您必须将'#mynav li a'更改为您正在使用的任何结构。 – Niels

我尝试了不同的方式，并得到了我以后的效果，感谢您的帮助，虽然，我很感激。 –

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

回答

相关问题