jQueryでプルダウンメニューを作る方法
- jQueryを使用してプルダウンメニューを作成したいのですが、うまく動作しない問題が発生しています。
- カーソルをリストに合わせるとネストしたリストが表示されるようにしましたが、正しく動作しません。
- ソースコードを確認した結果、セレクタ部分にエラーがある可能性があります。
- ベストアンサー
jQueryでプルダウンメニュー
jQueryでプルダウンメニューを作ろうと思いまして、 とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、 うまく動きません。どうしてでしょうか？ ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </body> </html>
- drunbarunba
- お礼率75% (6/8)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
$("ul li")とか$("ul")の""がぬけています thisはそのままでいいですが・・・
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
ul li → "ul li" ul → "ul" では？
お礼
なんて初歩的なミスなんでしょうか。 ありがとうございました。
関連するQ&A
- jQuery プルダウンメニュー
プルダウンメニューの一部で行き詰っています。 メニュー１のサブメニューが開いている状態で、メニュー２をクリックした時 メニュー１のサブメニューが閉じるようにする(その逆パターンも含む)。 サブメニューにカーソルがある時、メニューはhoverさせないようにする。 ▼html----------------------------------------- <ul id="gNav"> <li>メニュー1 <ul> <li><a href="">サブメニュー1-1</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="">サブメニュー2-1</a></li> <li>サブメニュー2-2 <ul> <li><a href="">サブメニュー2-2-1</a></li> <li><a href="">サブメニュー2-2-2</a></li> <li><a href="">サブメニュー2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー3</a></li> </ul> ▼jQuery----------------------------------------- $(function(){ $("#gNav > li").click(function(){ $(this).children("ul").toggle(); }); $("#gNav > li > ul > li").mouseenter(function(){ $(this).children("ul").show(); }).mouseleave(function(){ $(this).children("ul").hide(); }); $("#gNav > li").hover(function(){ $(this).css("background-color","#ff9900"); },function(){ $(this).css("background-color","#ffcc00"); }); $("#gNav > li > ul > li").hover(function(){ $(this).css("background-color","#99cc66"); },function(){ $(this).css("background-color","#669933"); }); $("#gNav > li > ul >li > ul >li").hover(function(){ $(this).css("background-color","#dddddd"); },function(){ $(this).css("background-color","#eeeeee"); }); }); 宜しくお願いします。
- 締切済み
- JavaScript
- jQuery多層式アコーディオンメニューについて。
javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。 これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。
- 締切済み
- JavaScript
- jQueryを使ったアコーディオンメニュー
現在、色々なサイトを見ながら、jQueryを使用した アコーディオンメニューを作成しています。(かなりの初心者です。) リンク先をクリックして、ページが移動した際に、 メニューの開いた状態が保持されるようにしたいのですが、 どうすれば良いのかわからず困っています。 //////////////////////////////////////////////// <script type="text/javascript"> <!-- var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index >= 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); //--> </script> html部分 <ul> <li>ABC <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li>... </ul> //////////////////////////////////////////////// ↑このような感じで表記しています。 どなたかお詳しい方、ご教示よろしくお願いします。
- 締切済み
- JavaScript
- jQueryでホバーされていない要素を半透明にする
http://www.skuare.net/test/jopacity_show.html 下記のようにスクリプトがありますが、いまいちわかりません。 画像の場合 <li><img src=hoge.gif title="menu 1"></li>でよろしいのでしょうか？ <ul id="menu"> <li>menu 1</li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> 「menu 1」にマウスオーバーされた際に、ほかの2-4が半透明になるイメージです。 まずはjQueryからjquery.jsをダウンロードします。 その後、以下のようなscriptを記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menu').children().hover(function() { //#menuの子要素にマウスオーバーした時の処理 $(this).siblings() //その要素の兄弟要素をすべて取ってきて .stop().fadeTo(500,0.5); //500ミリ秒かけて、opacity0.5まで変化させます }, function() { //マウスアウトの処理 $(this).siblings() .stop().fadeTo(500,1); //戻します }); }); </script>
- ベストアンサー
- JavaScript
- jQueryでの開閉メニューについて
jQueryでアコーディオン（開閉）メニューを作成しています。 メニューの右端に、マークを表示していますが、開閉状態に応じて変えることはできますでしょうか？ 単に変えるだけならできますが、開閉状態に応じて変えるとなると、なかなかできませんでした。 画像のように閉じているときは右端に[+]マークを表示し、開いたときは[-]マークを表示したいのです。 皆様の知恵をご教示いただけると幸いです。 以下ソースです。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="../js/jquery/jquery.js"></script> <script><!-- $(document).ready(function(){ var marks = { closedMark: '[+]', openedMark: '[-]' }; //開閉状態表示 $("h4.conmenu").append("<span>"+ marks.closedMark +"</span>"); //オンマウスでカーソル変更 $("h4.conmenu").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); //最初に表示するか？ $("ul.sub").css("display","none"); //クリック処理 $('h4.conmenu').click(function(){ // 開閉する速度 $(this).next().slideToggle('fast'); // マークを変える // $(this).find("span").html(marks.openedSign); }); }); //--> </script> <style type="text/css"> .leftmenu { float: left; width: 200px; background: #ff0000; list-style: none; } .leftmenu h4 { padding: 0; /* margin: 0;*/ margin: 5px 2px 5px 5px; } .leftmenu ul { padding: 0; margin: 0; list-style-type: none; } .leftmenu li { padding: 0; margin: 0; } .leftmenu a, .leftmenu a:visited { #text-transform:uppercase; display: block; height: 25px; line-height: 25px; padding: 0 10px 0 20px; color: #ffffff; background: #303030; text-decoration: none; } .leftmenu a:hover { color: #000; background-color: #acac23; } .leftmenu span{ float:right; } </style> <title>sample</title> </head> <body> <div class="wrapper"> <div class="leftmenu"> <h4 class="conmenu">Menu-1</h4> <ul class="sub"> <li><a href="#">Menu-1a</a></li> <li><a href="#">Menu-1b</a></li> <li><a href="#">Menu-1c</a></li> <li><a href="#">Menu-1d</a></li> </ul> <h4 class="conmenu">Menu-2</h4> <ul class="sub"> <li><a href="#">Menu-2a</a></li> <li><a href="#">Menu-2b</a></li> <li><a href="#">Menu-2c</a></li> <li><a href="#">Menu-2d</a></li> <li><a href="#">Menu-2e</a></li> </ul> <h4 class="conmenu">Menu-3</h4> <ul class="sub"> <li><a href="#">Menu-3a</a></li> <li><a href="#">Menu-3b</a></li> <li><a href="#">Menu-3c</a></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryを利用したアコーディオンメニュー
wordpress上でjQueryを使用したアコーディオンメニューを作成しようと思います。 サイトの左カラムに設置して、ボックス化されたリストの一部をクリックするとメニューの開閉、 テキストリンクの部分をクリックするとカテゴリのリンクに飛ぶように作成したいと考えております。 アコーディオンの開閉までは作成できたのですが、そこからカテゴリへのリンクがうまく行きません。。 javascriptがあまり詳しくないので、ぜひともお力を貸してください。 よろしくお願いします。 <!--javascript--> <script type="text/javascript"> var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li < a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); </script> <!--/javascript--> <!--php--> <ul class="acc"> <?php wp_list_categories('hide_empty=0&title_li='); ?> </ul> <!--/php-->
- ベストアンサー
- JavaScript
- jqueryでのプルダウンメニューについて
jqueryでのプルダウンメニューについて こんにちは。 現在私はWEBサイトを製作中です。 メインメニューにプルダウンをつけたいのですが、うまくいきません。 メニューはロールオーバーでの表示（CSSでやってます）です。 slideDownを使用しているのですが、 マウスオーバー時にslidDownで表示された、 サブメニューの背景が、上の要素の背景になってしまいます。 つまり、下のコードでいくとid="sub"の背景がそのまま clas="sub"の"li"要素の背景になってしまうということです。 何か対策はありますでしょうか？ html <div id="head"> <ul id="globalnavi"> <li id="gh"><a href=".">メニュー</a> <ul class="sub"> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> </div> <div id="main"> </div> jquery $(function(){ $("ul.sub").hide(); $("ul#globalnavi>li").hover(function(){ $("ul:not(:animated)", this).slideDown();}, function(){$("ul.sub",this).slideUp();}); }); CSS #globalnavi a{ background-image : url(../img/navi.png); background-repeat : no-repeat; display : block; width : 160px; height : 36px; color : #333333; text-decoration : none; line-height : 36px; } #header #globalnavi li { list-style-type : none; float : left; width : 160px; position : relativ; } #header #globalnavi { clear : both; width : 960px; line-height : 36px; overflow : hidden; position : relative; text-align : center; display : block; } ul,li{ margin:0; padding:0; } .sub li{ float : none; background-color : #FFF; } #gh a{ background-position :0 0; } #gh a:hover{ background-position :0 -36px; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。 しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。 この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは できるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div><!--main--> </div><!--page--> </body> </html>
- 締切済み
- CSS
- jqueryプルダウンメニュー個別着色
すみません。デザイナーでjqueryの配布しているものをお借りしているのですが、 プルダウンメニューで、メニューの色を個別に変えたいのですが、 CSSクラス名ごとに、下記のスクリプトを書かないといけないのでしょうか？ それとも、$('.btn')のところを、＄（'.btn','.btn2','.btn3')とかって省略はできますか？ 基本を解ってなくてすみません； どうぞ宜しくお願い致しますm（＝＝）m <script type="text/javascript"> $(function(){ $('.btn').hover(function(){ var btn = $(this).find('li').length; $(this).animate({'height':24 * btn + 'px'},'fast'); },function(){ $(this).animate({'height':'24px'},'fast'); }); }); </script>
- ベストアンサー
- JavaScript
- Jqueryでリストのスクロール
<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]： <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]： <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]： <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
お礼
なんて初歩的なミスなんでしょうかorz 基本的な部分を忘れていました。ありがとうございます。