JQuery скрыть / показать дивы из аккордеона

Question

Привет, у меня есть простой аккордеон, настроенный с помощью jQuery со структурой HTML:

<div  class="accordion_headings">Title 1</div>
<div class="accordion_child">Accordion Content 1</div>

<div  class="accordion_headings">Title 2</div>
<div class="accordion_child">Accordion Content 2</div>

и этот скрипт

$('div.accordion_headings').click(function() {
    $('div.accordion_child').slideUp('normal'); 
    $(this).next().slideDown('normal');
});

$("div.accordion_child").hide();

Теперь я также хочу, чтобы при переходе по любой из этих аккордеонных ссылок менялся еще один div на странице, поэтому я добавил больше классов к ссылкам

<div  class="accordion_headings link1">Title 1</div>
<div class="accordion_child">Accordion Content 1</div>

<div  class="accordion_headings link2">Title 2</div>
<div class="accordion_child">Accordion Content 2</div>

и добавил содержимое div, которое я хотел обменять

<div id="content_1" class="swap">Content 1</div>
<div id="content_2" class="swap">Content 1</div>

Это сценарий, который я придумал (обнюхав Stack Oveflow)

$(document).ready(function () {

    var clickHandler = function (link) {
         $('.swap').hide();
         $('#content_' + link.data.id).show();
         $('.selected').removeClass('selected');
         $(this).attr('class','selected');
   }

   $('.link1').bind('click', {id:'1'} ,clickHandler);
   $('.link2').bind('click', {id:'2'} ,clickHandler);

});

Почти работает ... однако при нажатии на аккордеон он теперь удаляет класс accordion_headings и разрушает мой стиль ... странная вещь, аккордеон все еще работает? Может кто-нибудь, пожалуйста, помогите мне убрать это. Также, как бы я оживил или использовал Fade? Буду ли я заменить скрыть и показать с FadeIn FadeOut? Благодарю.

Answer 1

Вместо:

$(this).attr('class','selected');

использование

$(this).addClass("selected");

Я бы также рекомендовал вам не использовать голые селекторы классов (например, ".link1"), поскольку они, как правило, намного медленнее, чем селекторы с прикрепленным тегом. Вот предлагаемое изменение:

$(document).ready(function() {
  var clickHandler = function(evt) {
    $('div.swap').hide();
    $('#content_' + link.data.id).show();
    $('div.selected').removeClass('selected');
    $(this).addClass("selected");
  }
  $('div.link1').bind('click', {id:'1'}, clickHandler);
  $('div.link2').bind('click', {id:'2'}, clickHandler);
});