- ベストアンサー
jQueryで○○ is undefind
H240S18B73の回答
普通のeach()と違って、$.each(obj,fn)はthisに値はいらないです 代わりにコールバックの第2引数に値が入ります jQuery.each(tech_product, function(ind,val) { val.tech.hover(function() { val.product.addClass('linkage'); }, function() { val.product.removeClass('linkage'); }); こんなカンジです
関連するQ&A
- jQueryでドロップダウンメニューができない
jQueryの参考書をみながらドロップダウンメニューを実装しようとしたのですが うまくいきません。 締切が迫って焦っております。 <ul class="main"> <li><a href="index.html">メインA</a></li> <li><a href="concept.html">メインA</a></li> <li><a href="service.html">メインA</a> <ul class="sub"> <li><a href="">サブ1</a></li> <li><a href="">サブ2</a></li> <li><a href="">サブ3</a></li> <li><a href="">サブ4</a></li> <li><a href="">サブ5</a></li> </ul> </li> <li><a href="faq.html">メインA</a></li> <li><a href="access.html">メインA</a></li> </ul> ｃｓｓは .main { clear:both; width:830px; height:42px; margin:0 auto; list-style-type:none; } ul .main li { width:166px; height:42px; float:left; position:relative; background:url(../../img/index/btn.png); } .main li a { display:block; width:100%; height:100%; padding:10px 0 0 40px; font-size:14px; font-weight:bold; color:#333333; text-decoration:none; line-height:1.5em; } ul .sub{ display:none; } scriptは <script type="text/javascript"> $(function(){ $("ul.main li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }) }) </script> です。いろいろ試行錯誤したのですがドロップダウンメニュ－が表示されず 困っています。何か見落としがあるのでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
- 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 プルダウンメニュー
プルダウンメニューの一部で行き詰っています。 メニュー１のサブメニューが開いている状態で、メニュー２をクリックした時 メニュー１のサブメニューが閉じるようにする(その逆パターンも含む)。 サブメニューにカーソルがある時、メニューは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で２段式アコーディオンメニュー
いつも参考にさせて頂いております。 あるサイト様（http://triplexxx.jp/archives/150）を参考にjQueryで２段式のアコーディオンメニューを作成していましたが、何分初心者なもので早々に行き詰まってしまいました。 理想はこちらのサイト様（http://html-five.jp/pc/demo/002/）にあるデモの下側、『２段アコーディオン』をこちら（http://html-five.jp/demo/002/index2.html）の『ポンプ型アコーディオン』ような動きにしたいと思っております。 スクリプト自体を入れ子にしたりしてみましたが根本的な部分がダメなようでうまくいきませんでした。 何卒ご教授いただけますようお願いします。 [参考にしたjQuery（１段までは問題なく動きます）] script type="text/javascript"> var j$ = jQuery; j$(function(){ j$(".ac_parent").each(function(){ j$("li > a").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> [作成中のHTML] <div> <ul class="ac_parent"> <li><a href="#">1</a> <ul class="ac_child"> <li><a href="#">11</a></li> <ul class="ac_gchild"> <li><a href="#">111</a></li> <li><a href="#">112</a></li> <li><a href="#">113</a></li> </ul> <li><a href="#">12</a></li> <ul class="ac_gchild"> <li><a href="#">121</a></li> <li><a href="#">122</a></li> <li><a href="#">123</a></li> </ul> </ul> </li> <li><a href="#">2</a> <ul class="ac_child"> <li><a href="#">21</a></li> <ul class="ac_gchild"> <li><a href="#">211</a></li> <li><a href="#">212</a></li> <li><a href="#">213</a></li> </ul> <li><a href="#">22</a></li> <ul class="ac_gchild"> <li><a href="#">221</a></li> <li><a href="#">222</a></li> <li><a href="#">223</a></li> </ul> </ul> </li> <li><a href="#">3</a> <ul class="ac_child"> <li><a href="#">31</a></li> <ul class="ac_gchild"> <li><a href="#">311</a></li> <li><a href="#">312</a></li> <li><a href="#">313</a></li> </ul> <li><a href="#">32</a></li> <ul class="ac_gchild"> <li><a href="#">321</a></li> <li><a href="#">322</a></li> <li><a href="#">323</a></li> </ul> </ul> </li> </ul> </div>
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- jqueryアコーディオンのマウスオーバー、マウスアウトでの開閉
お世話になります。js初心者の者です。 jqueryのアコーディオンメニューを設置したいのですが、親<li>へのマウスオーバーで開く、子<li><ul><li>からのマウスアウトで閉じるという動作がうまくいきません。 また、オープン時はすべて閉じた状態にもしたいのですが。 現状クリックでの開閉です。 htmlのソースです。 <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> jqueryのソースです。 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; }); }); }); }); マウスオーバーのみでの開閉は$this.click(function()をmouseoverに書き換えればできるのですが。 また、どのサンプルを見ても必ず初期段階が１項目開いた状態になっているのも、閉じて表示させたいのです。 よろしくご指導お願いします。
- ベストアンサー
- JavaScript
- jQueryのアコーディオンメニュー 開閉の制御
jQueryのアコーディオンメニュー 開閉の制御 こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして （http://triplexxx.jp/archives/150） アコーディオンメニューを設置しました。 ページ遷移後でも、常に一番目のメニューが開いている状態なので、 選択しているページのメニューだけを開いている状態にしたいのですが どの部分を変更したらよいでしょうか？ javascriptの if(index > 0) $this.next().hide(); の部分が開閉の指示をしている箇所かなと思うのですが 新しいコードを書ける知識がないので、教えてください。 よろしくお願いします。 html ---------------------- <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> ---------------------- css ---------------------- ul.acc, ul.acc li ul { margin: 0; padding: 0; list-style: none; } ul.acc a{ display: block; height: 30px; line-height: 30px; color: #feffff; } ul.acc { background-color: #185AAC; } ul.acc li ul { background-color: #A6B5E2; } ---------------------- 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); }); }); }); }); ----------------------
- ベストアンサー
- AJAX
- jquery ドロップダウン・メニュー
jquery ドロップダウン・メニュー ドロップダウン・メニューを作成しています。一番最後のtwitter部分だけにクリック動作を適用させたいのですが、 思うように表示が出来ません。 どうしたらいいのか、教えてください。 <script src="/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('li.twitter').click(function() { if ($(this).hasClass('click')) { $(this).removeClass('click'); } else { $('.click').removeClass('click'); $(this).addClass('click'); } }); $('div.drop').hover( function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); }); </script> <div id="feed"> <ul class="aux"> <li class="rss1"> <a href="http">RSS1</a> </li> <li class="rss2"> <a href="http">RSS2</a> </li> <li class="rss3"> <a href="http">RSS3</a> </li> <li class="twitter"> <a href="#"><span>Twitter</span></a> <div class="drop"> <p><strong>TW1</strong> <a href="http://www.twitter.com/●●" target="_blank"><img src="http://abcde/a.png" />Follow Me</a> </p> <p> <strong>TW2</strong> <a href="http://www.twitter.com/●●●●●" target="_blank"><img src="http://abcde/b.jpg" />Follow Me</a> </p> </div> </li> </ul> </div>
- ベストアンサー
- JavaScript
- jQueryプラグインのメガドロップダウンメニュー
jQueryプラグインのメガドロップダウンメニューについて 当方プログラミング初心者です。 至らない点ばかりですが、どうかご容赦ください。。。 この度、仕事でこのメガドロップダウンメニューを使用することになりました。 サンプルサイトです→(1)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/# (2)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/download/ 使用したいのは、 (1)にあるサンプル（オンマウスすると車の写真などが出てくる） スタイルは(2)にある、白色のバー なのですが、どうもうまくいきません・・・ 上記サイトからダウンロードしたもの ・jquery.js ・jquery.dcmegamenu.1.3.3.js ・dcmegamenu.css ・white.css その他素材などが、指定した名前のフォルダに入っています。 英語が読めないので、わからない単語は調べたりしてなんとかメニューとして形にはできたのですが バーの色は黒いままだし、まずドロップダウンしません。 今、この状態のまま詰まってしまっています・・・ たぶんめちゃくちゃになってしまっていると思うのですが、 どこが悪いのかわかりません・・・＞＜ ★ＨＴＭＬ（ヘッド） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ～～～ <head> <link rel="stylesheet" href="css/white.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.js"></script> <link rel="stylesheet" href="css/dcmegamenu.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.dcmegamenu.1.3.3.js"></script> <script type="text/javascript"> $(document).ready(function($){ $("mega-menu").dcMegaMenu({ rowItems: "3", speed: "fast" }); }); </script> </head> ★ＨＴＭＬ（ボディ） <div class="dcjq-mega-menu demo-container"> <ul id="mega-menu" class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Vehicles</a> <ul> <li id="menu-item-1"><a href="#">Coupe</a> <ul> <li><a href="#">Citroen C4</a></li> <li><a href="#">Honda CR-Z</a></li> <li><a href="#">BMW 3 Series</a></li> <li><a href="#">Volvo C30</a></li> </ul> </li> <li id="menu-item-2"><a href="#">Saloon</a> <ul> <li><a href="#">Volkswagen Passat</a></li> <li><a href="#">Volvo S40</a></li> <li><a href="#">Vauxhall Insignia</a></li> <li><a href="#">Mitsubishi Lancer</a></li> </ul> </li> ～～～～～～～～省略 <li id="menu-item-6"><a href="#">High Performance Cars</a> <ul> <li><a href="#">Lamborghini Gallardo</a></li> <li><a href="#">Ferrari F430</a></li> <li><a href="#">Aston Martin Vantage</a></li> <li><a href="#">Porsche 911 Turbo</a></li> </ul> </li> </ul> </li> <li><a href="#">About Us</a> <ul> <li><a href="#">About Us</a></li> <li><a href="#">About Us</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> 名前はまだサンプル通りです。 ★ＣＳＳ(1)（dcmegamenu.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/dcmegamenu.css ★ＣＳＳ(2)（white.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/skins/white.css つっこみ所だらけかと思います・・・すみません・・・ どこが悪いのでしょうか・・・？ 私のような初心者にはまだまだ早いプログラミングなのかもしれませんが、 どうか、お力添えをお願いできれば、、、、お願いします。
- 締切済み
- JavaScript
- jQueryのアコーディオンがIE6でちゃんと動いてくれない
jQueryのアコーディオンがIE6でちゃんと動いてくれない Mac osX 10.5.8 dreamweaver cs3 jQueryのアコーディオン機能を使い、2階層のサイドナビゲーションを作っています。しかし、それをIE6で確認すると２階層目だけが開いてくれません。＞＜MacのSafariなどではちゃんと動いています。 【構造】 （例：HTML） <div id="side"> <h3>製品紹介</h3> <div id="tab01"> <h4><img src="tab01.png" width="210" height="35" alt="" /></h4> <ul> <li><a href="#">会社概要</a></li> <li class="inner"><a href="#">製品紹介</a></li> <ul class="down"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> <li class="inner"><a href="#">会社沿革</a></li> <li><a href="#">企業理念</a></li> </ul> </div> <div id="tab02"> <h4><img src="images/tab02.png" width="210" height="35" alt="" /></h4> <ul> ーーーーー ＜同上のような構造＞ ーーーーー </ul> </div> </div> <!--side end--> （例：jquery（外部js）） $(document).ready(function() { var main = $("#side ul"); main.hide(); $("#side h4").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side h4").click(function(){ $(this).next().slideToggle('fast'); }); }); $(document).ready(function() { var main = $("#inner ul"); main.hide(); $("#side li.inner").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side li.inner").click(function(){ $(this).next().slideToggle('fast'); }); }); と、このような構造になっております。 h4をクリックするとその中身がスムーズに開閉、li.innerをクリックするとul.down内がスムーズに開閉。という形です。 どうか、ご教授のほうよろしく御願いします。
- 締切済み
- HTML
お礼
ありがとうございました。バッチリでした。そういえば、この位置に二つの引数を書く構文をある本で見たことがあり、「何でここにこんあのがあるんだ？jquery特有の書き方か？」なんて思っていたヤツでした^^ ちなみに「ind」は書いておくだけで今回は使いませんね。 従来は、長々と個々の場合毎に書いて動作させていたスクリプトがオブジェクト（連想配列）で簡潔に書けてよかったし、別の構想でも応用できそうなので、よいステップになりました。 ありがとうございました。