帮助与切换所有功能

我有其中的每个元素可切换打开和关闭这样帮助与切换所有功能

列表中的列表是这样的：

<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。有人可以帮助我以正确的方式来写这个功能吗？

来源

2011-02-08 Zac

全部展开可以改写，只需使用非活性的H2的的点击处理，像这样：

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

而崩溃所有可以改写只需点击活动的标题，例如。

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

通过实施展开/折叠这样所有的按钮，你离开每个H2 click处理程序来处理它自己的切换状态，你不应该进入的一致性问题。你

来源

2011-02-08 06:26:14

冷杉应该这样做，以确保该链接不执行默认：

$("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/

来源

2011-02-08 07:19:39 jsweazy

帮助与切换所有功能

回答

相关问题