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

这是DEMO。

非常感谢任何帮助。

感谢。

Answer 1

<强>已更新

DEMO： 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>

Answer 2

您要告知父级的所有siblings，以便进一步限定.siblings('selector-for-intended-element')

根据我的建议，请参阅JsFiddle：http://jsfiddle.net/BGBaH/1/

我建议您将div直接放在菜单项之后，然后使用.next()

<强> UPDTE

如果你不想这样做，这里有一个更像你原先要求的jsfiddle我相信

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

我刚刚在您的span菜单项中添加了id，并将匹配的类添加到相应的div中。然后我用适当的类选择器限定了.siblings()函数。

滑动菜单一下子全部出来

2 个答案: