切换所有链接，使用jQuery

我有开/关效应发生多次在这里：test site 切换所有链接，使用jQuery

我需要添加一个名为“切换所有”下面的页面标题链接，点击后会打开/关闭每一个赞助级别。我怎样才能做到这一点？

见工作代码：

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

来源

2011-03-18 user519642

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

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

来源

2011-03-18 17:17:14

谢谢安德鲁。精美的作品。我将href =“＃”更改为 user519642 2011-03-18 17:34:43

<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"); 
     } 
    }); 
});

它考虑到任何当前打开或关闭sponshorship。

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

另外你应该使用“event.PreventDefault（）;”而不是“返回假”;在点击事件函数（你将需要修改的声明。点击（函数（事件）{...）

来源

2011-03-18 17:16:25 GMO

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

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

});

来源

2011-03-18 17:18:36

也许

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

来源

2011-03-18 17:21:14 mattsven

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>

来源

2011-03-18 17:24:07 bconneen

切换所有链接，使用jQuery

回答

相关问题