Закрытие jQuery slideToggle + класс переключения при открытии другого

Question

Я пытаюсь закрыть один переключатель, когда открываю другое. У меня будет много из них на нескольких страницах, поэтому я бы предпочел не дублировать этот код для каждого.

Кроме того, я не могу использовать .next(); или что-то подобное, потому что некоторые из разделов содержимого, которые будут открываться при нажатии, не находятся непосредственно под ссылкой переключения. Вот почему я назначил атрибут rel переменной, чтобы я мог дать уникальную ссылку на каждую ссылку, затем одна кнопка должна открыть один конкретный div независимо от того, где он находится на странице.

Код в скрипке использует hide(); на всех div до его выполнения, но по какой-то причине класс «remove-border» не работает надежно, когда я это делаю. Вы можете увидеть, если вы нажмете один и тот же элемент несколько раз, граница появится и исчезнет. Это должно сделать эффект вкладок, поэтому граница, исчезающая и вновь появляющаяся при щелчке ссылки, необходима. Я использовал toggleClass, потому что граница должна быть добавлена ​​обратно при нажатии другой ссылки.

Подводя итоги: нажмите элемент 1 удаляет нижнюю границу под пунктом 1 и открывает div с классом «toggle-content1». Нажмите его еще раз, и он переключится на закрытую и заменяет границу ИЛИ, если вы нажмете кнопку ITEM2, она заменит границу под ITEM1 и закроет ее, затем откроет ITEM2, удалив границу из раздела ITEM2.

Вот мой JQuery:

jQuery(document).ready(function($){ 
    $(".toggle-button").click(function() { 
    var rel = $(this).attr('rel'); 
    $(".hh").hide(); 
     $(this).addClass("remove-border"); 
    $(".toggle-content" + rel).slideToggle(50, function() { 

     }); 
    }); 
}); 

Here's my fiddle of what I've got so far. Я даже приближаюсь к этому правильным способом?

Answer 1

Использование можно использовать следующий код :):

jQuery(document).ready(function($){ 
    $(".toggle-button").each(function(){ 
    $(this).click(function() { 
    $('.toggle-button').next('.hh').slideUp(); 
    $('.toggle-button').removeClass("remove-border"); 
    var rel = $(this).next('.hh'); 
     $(this).addClass("remove-border"); 
     rel.slideDown(); 
    }); 
    }); 
}); 

рабочий скрипку:

http://jsfiddle.net/ohLdee2g/1/

и это один с атрибутом вы создали rel:

jQuery(document).ready(function($){ 
    $(".toggle-button").each(function(){ 
    $(this).click(function() { 
    $('.hh').slideUp(); 
    $('.toggle-button').removeClass('remove-border'); 
    var rel = $(this).attr('rel'); 
     $('.toggle-content'+rel).slideDown(); 
     $(this).addClass('remove-border'); 
    }); 
}); 
}); 

jsfiddle :

http://jsfiddle.net/ohLdee2g/2/

полностью рабочий:

jQuery(document).ready(function($){ 
    $(".toggle-button").each(function(){ 
    $(this).click(function() { 
    $('.hh').slideUp(); 
    $('.toggle-button').removeClass('remove-border'); 
    var rel = $(this).attr('rel'); 
     if($('.toggle-content'+rel).is(':visible')){ 
      $('.toggle-content'+rel).slideUp(); 
     } else { 
     $('.toggle-content'+rel).slideDown(); 
     } 
     $(this).addClass('remove-border'); 
    }); 
}); 
}); 

jsfiddle:

http://jsfiddle.net/ohLdee2g/3/

последнее:

jQuery(document).ready(function($){ 
    $(".toggle-button").each(function(){ 
    $(this).click(function() { 
    $('.hh').slideUp('fast'); 
    $('.toggle-button').removeClass('remove-border'); 
    var rel = $(this).attr('rel'); 
     if($('.toggle-content'+rel).is(':visible')){ 
      $('.toggle-content'+rel).slideUp('fast'); 
      $('.toggle-button').removeClass('remove-border'); 
     } else { 
     $('.toggle-content'+rel).slideDown('fast'); 
      $(this).addClass('remove-border'); 
     } 

    }); 
}); 
}); 

http://jsfiddle.net/ohLdee2g/4/