0

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

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. 它应该直接放在.navigtion3div 下。另外，目前它一次只显示 1 .dropdown，如果所有.navigation3s 都是，它应该显示全部.active。

另外，根据用户的选择，我不知道用户屏幕上会显示多少个.navigation3s 和s。.dropdown

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

jsFiddle：

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

4

3 回答 3

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

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

于 2012-11-27T11:35:22.297 回答
0

您可以根据当前光标位置附加您的部门

   $('.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/

于 2012-11-27T11:34:42.080 回答
0

脚本中有错误：

$('.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 都显示在同一位置。因此，您可以通过更改它们的位置来显示它们。

于 2012-11-27T11:34:53.230 回答