Jquery 多重下拉开关

我有下面的脚本，这是部分工作

HTML:

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

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

.active

部分作品是被点击的

.navigtion3

变为红色，如果我点击全部三个，所有三个都变为红色

不工作的位是

下拉列表

。它应该直接放在

.navigtion3

div下。另外，目前它一次只显示1个

。下拉列表

，如果所有

.navigation3

都是

活动的

，它应该显示所有

此外，根据用户选择，我不知道用户屏幕上将显示多少个

.navigation3

s和

.dropdown

s

我似乎无法实现这一点，如果能得到jQuery专家的帮助，我将不胜感激

jsFiddle:

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

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

这就是我目前拥有的：

---

您可以根据当前光标位置附加分区

   $('.navigation3').click(function(event) {
        $(this).toggleClass('active');
        $(".dropdown").css('left',event.pageX-10);   
        $(".dropdown").css('top',event.pageY+10);  
        $(".dropdown").toggle();
    });

---

脚本中有错误：

$('.navigation3').click(function(event) {
   $(this).toggleClass('active');
   $(".dropdown").toggle(); // means toggle all the "dropdown". So if one is visible it will go invisible and vice-versa
});​

检查：

---

请注意，所有“下拉”div显示在同一位置。所以你可以通过改变它们的位置来显示它们。

像这样的东西怎么样

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

并确保正确放置元件

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

---

它并不完美，但它会让您开始

位置：绝对将div 40px从页面顶部放置，而不是从下拉列表中放置，您需要使用比我的版本更好的relativeClearly，但可以1。将

下拉列表的右上角与单击的
导航3的右下角对齐？2.如果单击了另一个
.navigation3
，请停止活动的
.dropdown
消失？@oshirowanen:遵循Chris的解决方案，因为它显然比我的好。我的解决方案将使dropdown div相对于光标当前位置显示，这与Chris使用的偏移位置相比不太好。我如何更正此问题，我是否需要使用某种形式的find/closest
。下拉列表
？我已经在JSFIDLE上发布了一个解决方案来解决这个问题。在这里，类名可能显得不恰当。您可以使用一些计数器来跟踪“下拉列表”的编号，或者您可以使用类似于：$（“.dropdown”）[number]的内容来查找相关的“dropdown”，其中number可以是正在单击的$（“.navigation3”）的序列号。这非常接近，谢谢。我会从这个开始，然后尽快回来。