Question

我有一个列表，其中每个元素都可以像这样切换打开和关闭

列表是这样的：

<h2 class="siteDesSubTrigger"> <a href="#">Trigger</a></h2>
<div class="siteDesSubBlock" style="display: none;">
<ul>    
<li>
Sub Content
</li>
</ul>

jQuery就像这样

$("h2.siteDesSubTrigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false; 
    });

我还需要添加一个Expand All / Collapse All开关，但是我遇到了麻烦，让它正常工作。这就是我到目前为止所拥有的

$("h2.expandAll").click(function(){
    $(this).toggle(function() {
    $("h2.expandAll").text("Collapse All");
    }, function(){
    $("h2.expandAll").text("Expand All");
    });

    $(this).toggleClass("active");
    $(".siteDesSubBlock").toggle();
    });

但它确实是错误的...就像一个面板已经扩展它将关闭它同时打开其余部分......好吧它基本上不起作用：P。有人可以用正确的方法帮我写这个函数吗？

Answer 1

展开全部可以重写为只使用非活动h2的点击处理程序，如下所示：

$('h2.siteDesSubTrigger').not('.active').click();

崩溃都可以重写，只需点击活动标题，例如

$('h2.siteDesSubTrigger.active').click();

通过实现像这样的展开/折叠所有按钮，你可以让每个h2点击处理程序处理它自己的切换状态，你不应该遇到一致性问题。

Answer 2

你应该这样做以确保链接不是默认的：

$("h2.siteDesSubTrigger").click(function(e){
    e.preventDefault();
    $(this).toggleClass("active").next().slideToggle("slow");
});

它在所有浏览器中都能正常工作，而不是返回false

以下是扩展所有内容并将所有内容全部展开的方法。

//expand all
$("h2.expandAll").click(function(e){
    e.preventDefault();
    $(".siteDesSubBlock").addClass("active");
    $(".siteDesSubBlock").slideDown("slow");
});
//collapse all
$("h2.collapseAll").click(function(e){
    e.preventDefault();
    $(".siteDesSubBlock").removeClass("active");
    $(".siteDesSubBlock").slideUp("slow");
});

我把它全部放在jsfiddle上让你在这里查看：http://jsfiddle.net/jsweazy/MnnAf/

帮助切换所有功能

2 个答案: