Question

我在这里多次发生开/关效果：test site

我需要在页面标题下方添加一个名为“toggle all”的链接，点击后，它会打开/关闭每个赞助级别。我怎么能这样做？

参见工作代码：

<h3 class="trigger">Presenting Sponsor</h3>
<div class="toggle_container"> content inside toggle_container is hidden/shown when trigger class is clicked</div>



$(document).ready(function(){
    $(".toggle_container").hide();
    $("h3.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("fast");
    return false;
});
});

Answer 1

<a href="#" id="all_toogle">toogle all</a>

$('#all_toggle').click(function(){
    var open = $(this).toogleClass('active').hasClass('active');
    $("h3.trigger").each(function(){
        if( open ){
            $(this).addClass("active").next().stop(true, true).slideDown("fast");
        } else {
            $(this).removeClass("active").next().stop(true, true).slideUp("fast");
        }
    });
});

它考虑了任何当前开放或关闭的赞助商。

“。stop（true，true）”用于在多次快速单击切换时防止动画“链”。

你也应该使用“event.PreventDefault（）;”而不是“返回假”;在您的点击事件功能中（您需要修改声明.click（function（event）{...）。

Answer 2

$("#toggle_button").click(function() {
    $("h3.trigger").toggleClass("active").next().slideToggle("fast");
});

工作示例：http://jsfiddle.net/andrewwhitaker/zxvxA/

Answer 3

$(".openAll").click(function(){

    $("h3.trigger").addClass("active").next().slideDown("fast");

});

Answer 4

也许

var toggle = true;

var toggleAll = function(){
    $("h3.trigger").removeClass("active");

    if(toggle){
        $("h3.trigger").next().slideDown("fast");
    } else {
        $("h3.trigger").next().slideUp("fast");
    }

    toggle = (!toggle);
};

Answer 5

JQuery在进行匹配时支持通配符。所以你可以这样做：

$("a[name=showAllLink]").click(function() {
   var linkTxt = $("a[name=showAllLink]").html();
   if (linkTxt.indexOf('Show')>=0) {
      linkTxt = linkTxt.replace(/Show/,"Hide");
      $("div[class*=toggle_container]").show();
   }
   else {
      linkTxt = linkTxt.replace(/Hide/,"Show");
      $("div[class*=toggle_container]").hide();
   }
   $("a[name=showAllLink]").html(linkTxt);
});

当点击名为“showAll”的锚点时，会显示所有这些。锚点的文本将在“全部显示”和“全部隐藏”之间切换。

<a href="javascript:void(0)" name="showAllLink">Show All</a>

使用jquery切换所有链接

5 个答案: