-1

クライアントのドロップダウン メニューの作成にかなりの時間を費やしています。私のコードは、それが何であるかに対して複雑すぎると思います。特定の目的を達成するための解決策/代替手段が必要です。

<font id="l1b" size="4" color="black" style="cursor:pointer; color:black;"
    onclick="showSubMenu('cat2');
    document.getElementById('cat1').style.display = 'none';
    document.getElementById('cat3').style.display = 'none';
    document.getElementById('cat4').style.display = 'none';
    document.getElementById('pa1').style.display = 'none';
    document.getElementById('pb1').style.display = 'none';
    document.getElementById('pc1').style.display = 'none';
    document.getElementById('pd1').style.display = 'none';
    document.getElementById('pa2').style.display = 'none';
    document.getElementById('pb2').style.display = 'none';
    document.getElementById('pc2').style.display = 'none';
    document.getElementById('pd2').style.display = 'none';
    document.getElementById('da2a').style.display = 'none';
    document.getElementById('da2b').style.display = 'none';
    document.getElementById('da2c').style.display = 'none';
    document.getElementById('da2d').style.display = 'none';
    document.getElementById('da2e').style.display = 'none';
    document.getElementById('da2f').style.display = 'none';
    document.getElementById('da2g').style.display = 'none';
    document.getElementById('da2h').style.display = 'none';">Tea Bags<img src="arrow.png" style="position:relative; left:8px; top:3px;"></font>

これがコンセプトの写真です: http://robstest.mydnd.com/helppic.php

最初に助けてくれた人は 10 ブラウニー ポイントを獲得します! :D

4

4 に答える 4

2

jQueryなどのライブラリを使用して生活を楽にすることの利点を説明するには：

純粋なJavaScript

var elementList = ['cat1', 'cat2', 'cat3', 'cat4', 'pa1', ... , 'da2h'];
function showSubMenu(el) {
    for (var i = 0; i < elementList.length; i++) {
        if (elementList[i] != el) {
            document.getElementById(elementList[i]).style.display = 'none';
        }
    }
}

jQuery

var elementList = ['cat1', 'cat2', 'cat3', 'cat4', 'pa1', ... , 'da2h'];
function showSubMenu(el) {
    $.each(elementList, function() {
        if (this != el) {
            $('#' + this).css({display: "none"});
        }
    }
}

このチュートリアルも役立つ場合があります：http ：//www.html-5-tutorial.com/

于 2012-04-18T03:58:46.367 に答える
1

これは、あなたが望むものと同様のことを行う JQuery ドロップダウン チュートリアルへのリンクです。

http://css-tricks.com/simple-jquery-dropdowns/

... ファイルをダウンロードして、必要に応じて変更することもできます。

プロジェクトを作成している間に、遊んで学ぶのに良い練習になるでしょう。

(さらに、ベスト プラクティスのアイデアを得るために、ドロップダウンの他の実装を確認することをお勧めします。モックアップした UI は、エンド ユーザーにとって少しわかりにくいように見えます)。

于 2012-04-18T04:03:37.877 に答える
0

jQueryを使用して次のようなことを行います。

$(function() {
    $("#l1b").children().each(function() {
        $(this).hide();
    });
});
于 2012-04-18T04:01:45.907 に答える
0

子要素を取得してループし、それぞれの表示を設定します。これを yourfunction(parentDiv) などの関数に詰め込み、セミコロンの後のオンクリック イベントに適用します。

このコードを入力しますが、現在、作業するのに十分な資料がありません。

于 2012-04-18T03:52:08.023 に答える