jQueryドロップダウンメニューの作成方法

Question

私は自分のページ上で作業するために多くのドロップドロップメニューを持っています。私はそれらが欲しい方法で作業するために必要なことを理解する助けが必要です。私が持っている最初のメニューはProductという名前です。プロダクトメニューには、スポーツ、交通機関、&の3つのオプションがあります。これらの3つのオプションのそれぞれには、誰かが選択したときに[プロダクト]メニューの隣に表示したいドロップメニューがあります。私は休暇中のコードを使用するように言われましたが、使用方法はわかりませんし、私にそれをよく説明するものは何も見つかりません。

$('#Select').change(function(){ 
     if ($(this).val() == '1') { 
      $('#select').css({'display':'block'});   
     } 
    }); 

この2つのステップをもう一度行います。私のスポーツメニューには、野球、バスケットボール、サッカー、サッカー、&レーシングから選ぶ5つのオプションがあります。スポーツメニューの横に個々のスポーツメニューを表示するにはどうすればいいですか？

私はこれをしたい他のステップ：Racing1、Racing2、& Racing3：

マイレーシングメニューは3つのオプションがあります。コードを書いて、誰かが選んだときのそれぞれの写真を表示するにはどうすればよいですか？

答えを書いているときにコードを説明してください。これを行うにはさらに多くのメニューがあります。私はこれを行う方法を理解したいので、私が持っているすべてのメニュー。

ありがとうございました。

Answer 1

これはあなたの質問に直接答えないかもしれませんが、私はこれをあなたに提案する私の義務と考えています。

の代わりに車輪を改造するオープンソースであり、さまざまなブラウザ/プラットフォームで頻繁にテストされています。

私はブートストラップフレームワークで始まります。すでにブートストラップを使用していて、メニューモジュールを使用してメニューを実装するのはかなり簡単です。

スタンドアロンソリューションをご希望の場合は、options with CSS3 + jQuery combinationのようなものがあります。

まだゼロからメニューを書きたい場合は、this answerが関心の対象です。

Answer 2

KあなたのプロジェクトにはjQueryが含まれていると仮定して、あなたがこのようにしたいと思うようなことをしてください。

まず、あなたのマークアップ（HTML）を作成します。

<div class="page-container"> 

     <div class="selectors-container"> 
      <div class="selector" data-select="product">Products</div> 
      <div class="selector" data-select="sports">Sports</div> 
      <div class="selector" data-select="school">School</div> 
     </div> 

     <div class="select-menus"> 
      <select id="products"><define options here></select> 
      <select id="sports"><define options here></select> 
      <select id="school"><define options here></select> 
     </div> 
    </div> 

選択のid属性は、ルート項目のdata-select属性と同じであることに注意してください。今すぐスクリプトいくつかのjQueryすべてがうまく動作させるために

.selectors-container { 
    float:left; //floats make things stack on eachother horizontally. 
} 
.select-menus select { 
    display:none; //elements with display:none are invisible. 
    float:left; //floats make things stack on eachother horizontally 
} 
.select-menus select.active { 
    display:block; //we want to show a select when it has the class 'active' 
} 

：

は現在、いくつかのCSS開始時に選択を隠し、そしてあなたにも指定されているようにそれらをフォーマットするを作成します。

$(".selector").mouseenter(function(event) { 
    event.preventDefault(); //makes sure nothing happens that usually does when this event is triggered (redundant here). 
    var selectId = $(this).data('select'); //access the element we're hovering by using the `this` keyword, it accesses the element that is triggering the event. 
    $(".select-menus select").removeClass("active"); //hide all selects again 
    $("#"+selectId).addClass("active"); //show the select that we're hovering. 
}); 

は今、これはあなたのように、Imは必ず私がここにあるいくつかの詳細を忘れてしまってください行う必要がありますが、あなたはイムは、必ずそれらを把握することができるはずです、Googleはあなたの友達です。