jquery - 多个下拉切换

Question

我有以下部分工作的脚本。

HTML:

<div class="navigation3">
    click me
</div>
<div class="dropdown">
    <div class="items">icon Default 3</div>
</div>

jQuery:

$('.navigation3').click(function(event) {
    $(this).toggleClass('active');
    $(".dropdown").toggle();
});​

.active 部分工作是点击的 .navigtion3 变成红色，如果我点击所有三个，所有三个都变成红色。

不起作用的部分是 .dropdown。它应该直接放在 .navigtion3 div 下。另外目前，它一次只显示 1 个 .dropdown，如果所有 .navigation3 都是 .active，它应该显示所有.

此外，根据用户选择，我不知道有多少 .navigation3 和 .dropdown 将显示在用户屏幕上。

我似乎无法让它工作，希望得到 jQuery 专家的帮助。

jsFiddle:

这是我目前拥有的: http://jsfiddle.net/MTESY/12/

Answer 1

像这样的东西怎么样http://jsfiddle.net/chrismoutray/MTESY/16/

$('.navigation3').click(function(event) {
    var $nav3 = $(this),
        $dd = $nav3.next('.dropdown');

    $nav3.toggleClass('active');

    var offset = 30,
        offsettop = $nav3.offset().top + $nav3.height() + offset,
        offsetleft = $nav3.offset().left;

    $dd.css({
        top: offsettop,
        left: offsetleft
    });

    $nav3.hasClass('active') ? $dd.show() : $dd.hide();
});

这里要关注的 2 位是；找到正确的下拉元素

$nav3.next('.dropdown');

并确保正确放置元素

$dd.css({
    top: offsettop,
    left: offsetleft
});

它并不完美，但它会让你入门