Переключить все ссылки, используя jquery - PullRequest
Новая
       0

Переключить все ссылки, используя jquery

0 голосов
/ 18 марта 2011

У меня есть эффект открытия / закрытия, который происходит здесь несколько раз: тестовый сайт

Мне нужно добавить ссылку "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;
});
});

Ответы [ 5 ]

0 голосов
/ 18 марта 2011

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>
0 голосов
/ 18 марта 2011

Может быть 

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);
};
0 голосов
/ 18 марта 2011 
$("#toggle_button").click(function() {
    $("h3.trigger").toggleClass("active").next().slideToggle("fast");
});

Рабочий пример: http://jsfiddle.net/andrewwhitaker/zxvxA/

0 голосов
/ 18 марта 2011 
$(".openAll").click(function(){

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

});
0 голосов
/ 18 марта 2011 
<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 (вам нужно будет изменить объявление .click (function (event) {...).

...