-3

いくつかのオプションを含む順序付けられていないリストで構成されるドロップダウン メニューがあります。オプションを選択すると、このオプションがヘッド選択ボックス (li class="first") に入力され、"I am a..." テキストが置き換えられます。次に、「Go」ボタンを押して、その特定のオプションの href を開くことができます。html は次のとおりです。

    <div class="dropNavOne" class="gradient">
    <ul>
    <li class="first"><a href="#">I am a...</a>
        <ul class="menu_body1">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
            <li><a href="#">Option 4</a></li>
            <li><a href="#">Option 5</a></li>
            <li><a href="#">Option 6</a></li>
            <li><a href="#">Option 7</a></li>
            <li><a href="#">Option 8</a></li>
            <li><a href="#">Option 9</a></li>
            <li class="last"><a href="#">Option 10</a></li>
        </ul>
    </li>
    </ul>
    </div>
    <a href="#"><div class="goButtonOne" class="gradient">Go</div></a>

これが可能な場合はお知らせください...ありがとう！

4

1 に答える 1

0

これを書く際に役立つと思われるいくつかのポイントを次に示します。要件に直接適合するプラグインがあるかもしれませんが、一方で、これを自分で実行できるほど単純に思えます。

  • 順序付けられていないリストの非表示および表示された要素にクラスを使用する
  • DOM 対応ハンドラーをセットアップして、ページにイベント ハンドラーを追加する
  • メニューを表示するためのクリック イベントを添付します (おそらくクラスごとに、一度に多くの項目を表示できます)。
  • クリックイベントを添付してメニューを非表示にします
  • HTML インジェクション メソッドを使用して要素の内部 HTML を変更する

これには確かにjQueryを使用できます。一緒に仕事をするのは素敵で、このようなものを書くことは良い最初の練習になるでしょう.

于 2013-04-15T20:41:21.973 に答える