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

它不完美，但它会让你开始

Answer 2

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

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

http://jsfiddle.net/MTESY/14/

Answer 3

脚本中有错误：

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

检查：http://jsfiddle.net/Agh3Z/ 请注意，所有“下拉”div都显示在同一位置。所以你通过改变他们的位置来展示他们。

多个下拉菜单切换

3 个答案: