2

私は純粋なネイティブを学習しようとしてJavaScriptいるので、タスクを解決するためにフレームワークを使用することを提案しないでください。私はそれらが素晴らしいことを知っており、純粋なJSを使い終わったら、それらを学ぶことが最初にやることになるでしょう:)

では、質問です。フィドル

ご覧のとおり、2 つのカスタム ドロップダウンがあります。それらのそれぞれは、マウスとキーボードの両方で開いて制御できます。このタスクを解決するために最後に行う必要があるのは、次の機能を実装することです: 1 つのドロップダウンを開くと他のドロップダウンを閉じ、ドロップダウンの外側をクリックすると、開いているドロップダウンをすべて閉じる必要があります (一度に開くことができるのは 1 つだけであると仮定します)。 .

ドキュメントにリスナーを追加しようとしましたonclick。これにより、ドロップダウンのいずれかが開いていても以前は使用されていなかった場合にドロップダウンが閉じますが、ドキュメントを1回クリックすると、ドロップダウンが表示されなくなります。しかし、それは問題の半分の解決にもなりません。オブジェクトにフラグ bIsOpen を割り当てているため、別のオブジェクトからそれらにアクセスして、トリガーされているかどうかを確認することはできません。

ヒントをください:)

4

1 に答える 1

1

開始ロジックと終了ロジックを独自の関数に移動します。

DropDown.prototype.open = function (e) {
    ...
}

DropDown.prototype.close = function (e) {
    ...
}

と

this.htmlDropDown.onclick = function (e) {
    if (this.bIsOpen) {
        this.open(e);
    } else {
        this.close(e);
    }
}

(ハンドラbIsOpenではなく、open 関数と close 関数が調整することを確認してください。)onclick

次に、現在存在するすべてのドロップダウンのリストを追加します。

function DropDown(htmlObject) {
    DropDown.dropdowns.push(this);
    ...
}

DropDown.dropdowns = []; // no 'prototype'

最後に、オープナーで、他のすべてのドロップダウンを閉じます。

DropDown.prototype.open = function (e) {
    var dropdown;
    for (var i = 0; i < DropDown.dropdowns.length; i++) {
        dropdown = DropDown.dropdowns[i];
        if (dropdown !== this) {
            dropdown.close();
        }
    }
    ...
}
于 2013-02-11T14:55:48.190 に答える