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赤くなり、3つすべてクリックすると3つすべてが赤くなります。

動作していないビットは.dropdownです。divのすぐ下にドロップする必要があります.navigtion3。さらに、現時点では、一度に1つしか表示されていません。すべてのが.dropdownである場合は、すべてを表示する必要があります。.navigation3.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 に答える