Раздвижные меню все выходят сразу

Question

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

Мои проблемы в том, что все DIV скользят вниз, и при нажатии на одну и ту же ссылку все DIV И элементы nva скользят вверх.

Как я могу сделать эту работу правильно?

Мой HTML:

<div id="megamenus" class="click-menu">
  <h6><span>Products &amp; Services</span></h6>
  <h6><span>Support &amp; Training</span></h6>
  <h6><span>Communities</span></h6>
  <h6 class="new-window"><span>Store</span></h6>

  <div class="menu-container">aaaa</div>    
  <div class="menu-container" id="training-n-support">bbbb</div>
  <div class="menu-container">cccc</div>
</div>

Мой JQuery:

$('.click-menu div.menu-container').hide();
$('.click-menu h6 span').click(function() {
  if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    $(this).parent().siblings().stop(true, true).slideUp('slow', function() {
        $('h4').css('z-index', '1');
    });

 } else {
    $('.click-menu h6 span').removeClass('selected');
    $(this).addClass('selected');
    $('.click-menu div.menu-container').slideUp('slow');
    $(this).parent().siblings().stop(true, true).slideDown('');
    $('h4').css('z-index', '0');
 }
});

Вот ДЕМО .

Любая помощь будет принята с благодарностью.

Спасибо.

Answer 1

Вы говорите всем siblings родителя о слайде, не квалифицируя его далее, как это .siblings('selector-for-intended-element')

См. JsFiddle для моей рекомендации: http://jsfiddle.net/BGBaH/1/

Я рекомендую ставить div непосредственно после пунктов меню и просто использовать .next()

UPDTE

Если вы не хотите этого делать, вот jsfiddle, который больше напоминает то, о чем вы изначально просили, я считаю

http://jsfiddle.net/BGBaH/2/

Я только что добавил идентификаторы к вашим пунктам меню span и добавил соответствующие классы в соответствующие div. Затем я уточнил функцию .siblings() с соответствующим селектором класса.

Answer 2

ОБНОВЛЕНО

• ДЕМО: http://jsbin.com/owete4/3

.menu-container { display:none }

---

$(function() {
    $('#megamenus h6').click(function(e) {
        e.preventDefault();
          $('#megamenus div').slideUp(500);
          $(this).next('div:not(:visible)').slideDown(500);
    });
});

---

    <div id="megamenus" class="click-menu">
        <h6><span>Products &amp; Services</span></h6>
        <div class="menu-container">dddd</div>
        <h6><span>Store</span></h6>
        <div class="menu-container">aaaa</div>
        <h6><span>Support &amp; Training</span></h6>
        <div class="menu-container">bbbb</div>
        <h6><span>Communities</span></h6>
        <div class="menu-container">cccc</div>
    </div>