-1

ドロップダウン用の素敵なスクリプトを見つけました。問題は、同じページに複数のドロップダウンを作成しようとしていますが、同じクラスを使用しているため、スタイルを複製する必要がありません。

スクリプトは次の形式です。

http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

コードをダウンロードしてページに 2 つ追加しようとしましたが、そのうちの 1 つをクリックすると両方がトリガーされます。.parent()、.children() などでいくつかのことを試しましたが、何も機能しませんでした。

誰かが私を助けて正しい方向に向けることができますか? ソースコードを見ることができるデモページは次のとおりです。

http://www.jankoatwarpspeed.com/examples/reinventing-drop-down/

更新: そして、これは私が取り組んでいたデモ ページのコピーです: http://multideveloper.com/tests

どうもありがとう！

4

3 に答える 3

1

ID を既に持っている場合は、ID を定義することをお勧めします。ドロップダウンごとに異なる、もう 1 つのクラスを定義します。1 つの要素に対して複数のクラスを定義できます。

于 2012-10-01T12:19:46.010 に答える
1

これは、ドロップダウン コンポーネントがインスタンスが 1 つしかないと想定し、クラス名でバインドするためです。

スクリプトを少し変更するだけで、複数のインスタンスを機能させることができます。変更の概要は以下のとおりです。

デモ: http://jsfiddle.net/fZbx6/1/

変更を強調するためにコメントを入れました。

$(document).ready(function() {
    $(".dropdown img.flag").addClass("flagvisibility");

    $(".dropdown dt a").click(function() {

        // old
        //$(".dropdown dd ul").toggle();

        // new
        $(this).parents(".dropdown").find("dd ul").toggle();

    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();

        // old
        //$(".dropdown dt a span").html(text);
        //$(".dropdown dd ul").hide();

        // NEW
        var dd = $(this).parents(".dropdown");
        dd.find("dt a span").html(text);
        dd.find("dd ul").hide();

        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });


    $("#flagSwitcher").click(function() {
        $(".dropdown img.flag").toggleClass("flagvisibility");
    });
});
于 2012-10-01T12:23:35.087 に答える
0

スクリプトは基本的にドロップダウンを取り、リスト要素を表示します-$('#sample > dd > ul').show();

各 select 要素に一意の ID を与えてから、ドロップダウンをトリガーすることをお勧めします。このようにして、対象の要素のみが表示されます。

于 2012-10-01T12:25:59.520 に答える