不必要な要素を非表示にする方法
- リスト表示している要素をクリックしたら、その要素の上にフォームを表示してポストしたいと思っています。しかし、不必要になったと思われる時に、非表示にすることができません。この問題を解決するための方法を教えてください。
- 質問者はjQueryを使用しており、Firefox 3で動作することを目標としています。ここでは、リスト要素の非表示方法を提示し、問題を解決する方法を提案しています。
- ハッシュタグ: #不必要な要素非表示 #jQuery #フォーム表示 #非表示方法 #問題解決
- ベストアンサー
不必要になった要素を非表示にしたいのですが、良い方法を教えて下さい。
こんにちは、お世話になります。 早速ですが、質問させてください。 リスト表示している要素をクリックしたら、その要素の上にフォームを表示してポストしたいと思っています。 おおよそ出来る様になったのですが、不必要になったと思われる時に、非表示にする事ができません。 フォームを表示している<div>以外の部分をクリックしたり、入力部からフォーカスが外れた時に非表示にするにはどのようにすれば良いか教えて下さい。 jQueryを使っています。firefox 3 で動けば良いと思っています。 見にくいと思いますが、以下に出来るだけ簡略化した物を貼り付けます（tabを全角スペースにしてあります）。よろしくおねがいします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('span').each(function(){ $(this).click(function(){ $('#form_box').hide(); $('#name').val($(this).html()); var offset = $(this).offset(); $('#form_box').css({'top' : offset.top , 'left' : offset.left }).show('fast',function(){$('#name').focus()}); }); }) //$('#name').blur(function(){$('#form_box').hide();}) }); function hide() { $('#form_box').hide(); return false; } </script> <style type="text/css"> span { cursor : pointer; } </style> </head> <body> <ul> <li><span>1</span> <ul> <li><span>1-1</span></li> </ul> </li> <li><span>2</span> <ul> <li><span>2-1</span> <ul> <li><span>2-1-1</span></li> </ul> </li> <li><span>2-2</span></li> </ul> </li> </ul> <div id="form_box" style="display:none;position:absolute;"> <form onsubmit="alert('送信')"> <input type="text" id="name" /> <input type="submit" value="送信" /> <button onclick="return hide();">閉じる</button> </form> </div> </body> </html>
- g_p_
- お礼率78% (26/33)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。 失礼しました、ご質問をよく読むとわかりますね。（私の読解力不足） とりあえずひとつの案としてカーソル位置によって制御するという方法はいかがでしょうか？ ◆案1 （form_boxから外れたら消す） $(document).ready内に以下を追加 $('#form_box').hover(function(){},function(){hide();}); このままだと、form_boxから少しでもカーソルが外れるとすぐに消えるので、けっこう使いにくそうです。 そこで、divの範囲を広げるために、formにmarginを設定しておくとかなり安定してほぼご質問の通りになりました。 ただし、この場合はformの表示位置がmargin分だけずれますので、margin分だけ左上にずらして表示するように、スクリプトを修正する必要があります。 (marginの大きさは、使い方によってどのくらいがいいか微妙なところ。10～50px程度でしょうか？） ◆案2 （全体から外れたら消去） <ul>、<li>およびform_boxを<div id="list">等でくくっておいて、 $('#list').hover(function(){},function(){hide();}); お望みとは少し違いますが、入力リストの範囲からカーソルが外にでると消去。 これはこれで、違和感は少ないのではと思います。 --------------------------------------- タブキーでフォーカスが外れた場合を取得する方法は少々やっかいみたいです。 エレメントにフォーカスがあるかないかをチェックできれば簡単なのですが、どうやら取得できないらしい。（私が知らないだけかも） 代案として思いついたのは、（ベタな方法ですが）イベントでとらえてフォーカスのあるなしを控えておく方法。 form内のtextとsubmitの両方にフォーカスが無いときに、hide()する。 グローバル変数（例：f1、f2）に状態を記録するものとして、 （$(document).readyの外側で最初にf1、f2を定義しておく） ◆案3 （フォーカスを確認して消去） $('#name').focus(function(){f1=true;}); $('#name').blur(function(){f1=false;if (!f2){hide();}}); などのようにしておけば、フォーカスが外れた時にチェックが可能になります。（submitも同様に、f2に状態を記録しておく） 実は、↑のままだとfocusのイベントとblurのイベントの後先があってうまくいきません。 判定を遅らせるために、2行目を以下のようにするとうまくいきます。 $('#name').blur(function(){ f1=false;var d=setTimeout("if (!f2){hide();}",1); }); 少々、スマートさに欠ける気がしますが、とりあえずなんとかなりそうなアイデアの提供ということで… （探せば、もう少しいい方法が見つかりそうな気がします。）
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
＞不必要になったと思われる時に、非表示にする事ができません。 質問文からは「不必要になったと思われる時」がどのような時なのか、非表示にする対象は何かが読み取れませんので、いいかげんな推測ですが… ◆マウスのオン、アウトでliタグを表示/非表示したいのであれば、ツリー形式のメニュー表示をスクリプトで行っている例がたくさん公開されていますので、そのあたりが参考になると思います。 （スクリプトを見る限りは、それらしきことは行っていないので、多分、こういう意味ではないのだろうとは思うけど…） ◆非表示にしたい対象がform_boxであるなら、すでにfunction hide()があるので、非表示にしたいタイミングで呼び出せばよいはずです。 こちらについては、現状でも機能していると思われますので、その他のどのタイミングなのかがわかりません。 なお、ご質問には関係ありませんが、ファンクション名とjQeryのメソッド名（？）のhide()が完全に一致してしまっているので、かなり気持ちが悪いのですが、どうやら悪さはしてないみたいですね。
補足
ありがとうございます。 分かり難い文章ですみません。 階層構造になっているデータをサーバーサイドでリスト表示して、 そのデータを修正するために、要素がクリックされたら、 通常非表示にしているフォームを該当要素の上に移動し表示して、 内容をサーバーへポストしてデータの修正が出来るようにしたいと思っています。 現在は、閉じるボタンを作っていて、それを押下することでフォームを非表示にしていますが、 ページ内の関係ない部分をクリックしたり、タブキーを押してフォームからフォーカスが外れた場合は 自動的に非表示にしたいと思っています。（閉じるボタンをなくしたい） jQueryプラグインのdate pickerの様な動きを期待しているのですが、残念ながらソースを読み下す力量がありません。 良い方法をご存知であればご教示ください。よろしくお願いいたします。
関連するQ&A
- 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
- ドラッグによるスライド移動をさせない方法(safari/chrome)
お世話になります。 早速ですが質問させていただきます。 jQuery1.3.2とEasySlider1.7プラグインを使っています。 EasySliderを使ったスライドの中にテキストボックスを配置しているのですが、 このテキストボックスでドラッグしてスライドの領域外へ移動させると 次のスライドへ移動してしまいます。 （safari と google chrome のみ） これを移動させないよう固定する方法はありませんでしょうか？ 以下にソースコードを載せておきます。 ------------------------------------------------------- <html> <head> <title>Easy Slider TEST</title> <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> <script type="text/javascript" src="lib/jquery/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script> <style type="text/css"> #slider{} #slider ul{ list-style-type:none; margin:0px; padding:0px; } #slider ul li{ height:100px; width:300px; } </style> </head> <body> <div id="slider"> <ul> <li><div style="height:100%; background-color:#aaa;"> <input type="text" name="text" value="slide-1" /> </div></li> <li><div style="height:100%; background-color:#bbb;">slide-2</div></li> <li><div style="height:100%; background-color:#ccc;">slide-3</div></li> </ul> </div> </body> </html> ------------------------------------------------------- ■jQuery1.3.2■ http://docs.jquery.com/Release:jQuery_1.3.2 ■EasySlider1.7■ http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider 以上、よろしくお願い致します。
- ベストアンサー
- JavaScript
- サブメニュー表示方法
以下のサイトのようなナビゲーションを作っています。 http://www.skuare.net/test/jHsubnav.html マウスオーバーでサブメニューが出るのではなく 最初からHOMEの サブメニューを表示しておくには、どのようにしたらよいでしょうか。 初心者で、わからず困っています。 よろしくお願い致します。 ------------------------------------------------------- <!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" /> <style type="text/css"> ul#topnav { margin: 0; padding: 0; list-style: none; position: relative; font-size: 1.2em; background: #000; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; } ul#topnav li a { padding: 10px 15px; display: block; color: #000; text-decoration: none; } ul#topnav li:hover { background: #1376c9; } ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; background: #1376c9; color: #fff; } ul#topnav li:hover span { display: block; } ul#topnav li span a { display: inline; } ul#topnav li span a:hover {text-decoration: underline;} </style> <script type="text/javascript" src="http://alphasis.info/library/javascript/jquery/jquery-1.4.2.js"></script> <title>無題ドキュメント</title> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("ul#topnav li").hover(function() { //メインメニュー（#topnavi li）にマウスが乗った時 $(this).css({ 'background' : '#1376c9'}); //その要素の背景色を変える $(this).find("span").show(); //サブメニューを表示 } , function() { $(this).css({ 'background' : 'none'}); //背景色を戻す $(this).find("span").hide(); //サブメニュー隠す }); }); </script> <ul id="topnav"> <li><a href="#">Home</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> <li> <a href="#">About</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- 要素をソートしてその要素を三つずつ表示するには
お世話になっております。 最近、jQueryを使い始めたjavascript初心者です。 以下の動作を実装したいのですが、どうすればいいでしょうか？ 1.カテゴリーボタン（中華、和食、洋食）を押すとそのカテゴリー要素の上位三つのみが表示される。 2.もっと見るボタンを押す度に表示させているカテゴリー要素が三つずつ増えていく。 各カテゴリー要素の上位三つを表示させるのは jQueryのltフィルターを使うことでできたのすが、もっと見るボタンで三つずつ表示要素を増やしていく動作がうまくいきません。 $(".chinese:lt(3)").show();のli()の数値部分を変数にし、 もっと見るボタンを押すたびに変数Numに値を+3してltの数値を動的に変更することができればうまくいくと思ったのですが $(".chinese:lt(Num)").show(); これでは動作しません。 以下ソースです。 ご回答よろしくお願いいたします。 http://foofoo77.web.fc2.com/imagechange/sort.html <head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(function(){ var Num = 3; $("#chinese-btn").click(function(){ $("li").hide(); $(".chinese:lt(Num)").show(); }); $("#japanese-btn").click(function(){ $("li").hide(); $(".japanese:lt(2)").show(); }); $("#european-btn").click(function(){ $("li").hide(); $(".european:lt(2)").show(); }); $("#add-seeing").click(function(){ Num +=2; alert(Num); }); }); </script> <style type="text/css"> li { display: none; } </style> </head> <h1>ソート</h1> <button id="chinese-btn">中華</button> <button id="japanese-btn">和食</button> <button id="european-btn">洋食</button> <ul> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> </ul> <button id="add-seeing">もっと見る</button>
- ベストアンサー
- JavaScript
- クリックファンクションがうまくいかない
クラス名drawermenuをクリックしたときにドロワーメニューが出たり消えたりする作りなのですが、リストの中にグーグルサイト内検索を入れたところ検索しようと検索ボックスを選択するとドロワーメニューが消えてしまいます。 親divについていると子にある要素をクリックしても親をクリックしたことになってしまうのでしょうか？ そうであれば検索ボックスを選択した時だけ実行されないようにするにはどうしたらよいのでしょうか？jqueryを使っています。 <nav> <div id="js-drawermenu-button-animation" class="drawermenu"> <ul> <li class="drawermenu__item"> </li> <li class="drawermenu__item"> <form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank"> <div> <input type="hidden" name="cx" value="" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="55" /> <input type="submit" name="sa" value="検索" /> </div> </form> <script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang..."></script> </li> </ul> </div> </nav> ｊｓ $(function(){ $('.modal-button-wrap, .drawermenu').on('click', function() { $('.drawermenu').toggleClass('showmenue'); }); });
- ベストアンサー
- JavaScript
- ドラックアンドドロップ？
質問させていただきます。 下記のようなページを作っています。 ドラック&ドロップで画像の移動が出来るページを作成しています。 ドラック&ドロップで画像を動かせるようにはなったのですが、 <div id="menu"> <ul> <li class="co_info_li_line01">担当：hoage</li> <li>03-5452-3711 hoge@hoge.co.jp</li> </ul> </div> など、メニューのulタグ、liタグ等、動かす必要の無いところ まで反応してしまいます。 回避方法がわかりません。 どなたかわかる方ご教授願います、 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <title>Back and forth!</title> <link rel="stylesheet" type="text/css" href="jslib/bill.css" /> <link rel="stylesheet" type="text/css" href="jslib/highslide/highslide.css" /> <script type="text/javascript" src="jslib/prototype.js"></script> <script type="text/javascript" src="jslib/scriptaculous.js?load=effects,dragdrop"></script> <script type="text/javascript" src="jslib/bill.js"></script> <script type="text/javascript" src="jslib/highslide/highslide-with-gallery.js"></script> </head> <body> <div id="head"> <div id="birukenTop"> <a href="http://www.hogehoge.com"><h1><span>検索システム</span></h1></a></div> </div> <div id="menu"> <div id="co_info"> <p class="hello_ID">ようこそ！hoge様</p> <ul> <li class="co_info_li_line01">担当：hoage</li> <li>03-5452-3711 hoge@hoge.co.jp</li> </ul> </div> <div class="clr"></div> <div id="menu_tab"> <!- <ul> <li><img src="images/cmn/head_tag01_2.jpg" alt="検索1" width="161" height="31" border="0" /></li> <li><img src="images/cmn/head_tag02_1.jpg" alt="検索2" width="161" height="31" border="0" /></li> <li><img src="images/cmn/head_tag03_1.jpg" alt="おすすめ物件" width="161" height="31" border="0" /></li> </ul> </div> <div id="menu_tab_foot"> <ul> <li>検索3</li> <li>ページを開く</li> </ul> </div> </div> <div class="clr"></div> <div id="main"> <form name = "imagepic"> <UL id="gloop1"> <li id="2020:1"> <img src="sA01.jpg"> <input type="checkbox" id ="room" name="room" value="2020:1"> <div class="highslide-caption"> <img src="images/search_detail.gif" alt=""> </a><br> </div> </div> </li> <li id="2304:6"> <img src="sB01.jpg"> <input type="checkbox" id ="room" name="room" value="2304:6"> </div> </li> </UL> <span id="parisinfo">順番1：</span> <BR> <P><INPUT size="20" name="hid_gloop1" id="hid_gloop1info" value= "gloop1"></P> <BR> <P><INPUT size="20" name="kekka" id="kekka_id" value= ""></P> <INPUT type="button" name="登録" value="test" onclick="func_search()"> </form> </div> <div id="foot"> <p>2007</p> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- 複数トリガーで動作するアコーディオンメニュー
お世話になります。 シングルページでページ内リンクでコンテンツ移動するタイプのページ作成を現在やっているのですが、急に標題の内容の要望が急ぎ対応として来まして、困っております。 具体的に言うと、 通常アコーディオンメニューは、 隠してある部分の見出しなんかをトリガーにして、開閉して内容を表示・非表示させると思いますが、今回要望としてあるのは、 グローバルナビもそのトリガーにしたいということです。 グローバルナビをクリックすると、該当箇所に移動しつつ、普段見出しだけで内容が隠してあるものも展開されるということができればと思っております。 参考までにコードを記載しておきます。 js部分 //accordion $('#sub01 h4').click(function() { $(this).toggleClass("open").next("div").slideToggle(); }).next().hide(); // drop down $("#nav li.drop").hover(function() { $(this).children('ul').show(); }, function() { $(this).children('ul').hide(); }); }); <div id="nav"> <ul class="clear"> <li><a href="#menu1">メニュー１</a></li> <li class="drop"><a href="#menu2">メニュー２<span>▼</span></a> <!-- InstanceBeginEditable name="planList" --> <ul> <li><a href="#sub01">サブ1</a></li> <li><a href="#sub02">サブ2</a></li> </ul> <!-- InstanceEndEditable --> </li> <li><a href="#menu3">メニュー3</a></li> <li><a href="#menu4">メニュー4</a></li> </ul> </div> ------省略-------------- <div id="sub01" class="subcontent"> <h4><span>項目名</small></span></h4> <div class="sub01Inner clear"> 内容内容内容</div><!-- /planInner --> </div><!-- /planBox -->
- 締切済み
- JavaScript
- mouseoverのコンテンツ内でselectタグ
jQueryでマウスオーバーで、あるコンテンツを表示する仕組みを作って、 そのコンテンツ内にプルダウンを表示したいのですが、 <option>の選択肢にカーソルを合わせると、コンテンツが閉じてしまい、困っています。 （メガメニュー？のようなイメージです。IEとFireFoxで検証しています。） ↓のようなソースを書いているのですが、どこがいけないのでしょうか。。 --------------------- <!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="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //一旦非表示 $('#cont').hide(); //ここから表示設定 $('#hoge').mouseover(function(){ $('#cont').show(); }).mouseout(function(){ $('#cont').hide(); }); }); </script> <style type="text/css"> #hoge {margin:0; padding:0;} #cont {padding:100px; position:absolute; background-color: rgba(0, 0, 0, 0.5);} </style> </head> <body> <ul> <li id="hoge"> <a >hoge</a> <div id="cont"> <form method="get"> <select> <option value="">選択してください</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> <input type="button" value="検索" /> </form> </div> </li> <li>…</li> <li>…</li> </ul> </body> </html> --------------------- わかる方いらっしゃいましたら、ヒントいただけると嬉しいです。。 よろしくお願いいたしますm(__)m
- 締切済み
- JavaScript
- ｊQuery UIについて
今ｊQueryUITabｓというプラグインを使ってタブによる切り替えを行おうとしています。 このプラグインでは、タブの内容をajaxのように他のページを読み込めるとのことで 以下のようなコードを書いてみました。 この場合に、tabs.htmlの方で、読み込んだ先のフォームがクリックされたのを検知するには どうしたらよいのでしょうか。 単純に、tabs.htmlのスクリプトの部分に次のようなコードを書いても「Undifined」が表示されてしまいました。 $("#form1").submit(function(){ alert($("#form1_text").val()); }); もし解決策をご存知でしたら、ご教授お願いいたします。 --------- Tabs.html ------------------ ++++++script++++++++ $(function(){ $("#tabs").tabs(){}); }) ++++++script++++++++ ++++++html++++++++ <div id ="tabs"> <ul> <li><a href = "test1.html">テスト１のフォーム</a></li> <li><a href = "test2.html">テスト２のフォーム</a></li> </ul> </div> ++++++html++++++++ --------- Tabs.html ------------------ --------- test1.html ------------------ <form id = "form1"> <input type = "text" id = "form1_text"> <input type = "submit" id = "form1_submit"> </form> --------- test1.html ------------------ --------- test2.html ------------------ <form id = "form2"> <input type = "text" id = "form2_text"> <input type = "submit" id = "form2_submit"> </form> --------- test2.html ------------------
- 締切済み
- JavaScript
- jQueryスライドメニューの初歩的な質問です
以下のスライドメニューは、それぞれブロック要素で構成されていて、リンク文字や余白をクリックするとスライドトグルで開閉が行われます（htmlファイルにコピーすれば動作すると思います）。 ひとまずイメージ通りに完成したのですが、1つ困ったことがあります。それはリンク文字をクリックしたときにトグルが実行されてしまうことです。ページ遷移する間にメニューが一度開閉してしまうので見た目にあまりスマートではありません。 それを修正するためいろいろ試行錯誤したのですが、どうやってもわからなかったので質問いたしました。リンク文字をクリックしたときは、ページ遷移のみでトグルを実行しないようにするにはどのように書けばよいのでしょうか？ また、このソースはjQueryを1.7.2以上にすると動作しなくなってしまいます。この原因が分かる方がいらしたらぜひお教えください。 どうぞよろしくお願いいたします。 <!----------------------------------> <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script type='text/javascript'>google.load('jquery', '1.7.1')</script> <script type='text/javascript'> <!-- $(function(){ $('span.tree_a').click(function() { $(this).next().slideToggle(); }).next().hide(); }); //--> </script> <!----------------------------------> <style type="text/css"> span.tree_a{ width: 100%; display: block; } </style> <!----------------------------------> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー1</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー1</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー1</a></li> </ul> </li> </ul> </li> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー2</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー2</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー2</a></li> </ul> </li> </ul> </li> </ul> <!---------------------------------->
- ベストアンサー
- JavaScript
お礼
何度も時間を割いて頂いて本当にありがとうございました。 何とか動くようにする事ができましたが、もし他の良い方法がありましたらまた教えていただけると嬉しいです。
補足
度々ありがとうございます。 頂いたアイデアを参考に、 フォーカスの状態を変数に格納しておいて、タイマーで監視するようにしてみました。 タイミングによっては微妙な感じもしますが、何とか動きます。 以下です。 <script type="text/javascript"> var focus = false; var timer; $(document).ready(function(){ $('span').each(function(){ $(this).click(function(){ $('#form_box').hide(); $('#name').val($(this).html()); var offset = $(this).offset(); $('#form_box').css({'top' : offset.top , 'left' : offset.left }).show('fast',function(){$('#name').focus()}); }); }) $('#name').blur(function(){focus = false;}).focus(function(){focus = true;}); $('#button').blur(function(){focus = false;}).focus(function(){focus = true;}); timer = setInterval(function(){if(!focus){$('#form_box').hide();}},500);; }); </script>