• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:JavaScriptのjquery.jqTOCの目次をプルダウンにする)

JavaScriptのjquery.jqTOCの目次をプルダウンにする

このQ&Aのポイント
  • JavaScriptのjquery.jqTOCを使用して、目次をプルダウンにする方法について説明します。
  • マウスを乗せるだけで目次が開き、離すと閉じるようにする方法を紹介します。
  • デフォルトではクリックして目次を開くが、マウスオーバーで開閉できるようにする方法を解説します。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

jquery.jqTOC.jsをざっと見たところ、 こいつは、クリックで表示・非表示をトグルさせててるみたいですから、 クリックのイベントバインドをマウスインで表示、マウスアウトで非表示 に振り分け(jQueryだとhover(over, out)を使う) て書き直せば出来ると思います。 http://semooh.jp/jquery/api/events/hover/over%2C+out/

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ゆっくりと出るプルダウンを作りたいのですが、

    ゆっくりと出るプルダウンを作りたいのですが、 メニューからプルダウンがゆっくり出るwebページを作ろうと、 http://onehackoranother.com/projects/jquery/droppy/ よりソースをコピペして、一応は作ることが出来ました。 ただ、出来ればクリックしてプルダウンが出るのではなく オンマウスでプルダウンが出るようにしたいのですが、 JavaScriptはほとんど素人なのでどこをいじってよいかわかりません。 カスタマイズの仕方がわかる方がいらっしゃいましたら、お知恵を貸してください。 出来上がりを重視していますので、上記サイトのカスタマイズではなくても、他サイトで良いサンプルを掲載しているサイトがありましたら、そちらの紹介でも構いません。 よろしくお願いいたします。

  • javascriptでなめらかなプルダウンメニューを

    javascriptを使ってFlashで作成したようななめらかな動きをするプルダウンメニューを 作成するのは出来るのでしょうか。 色々と調べてはいるのですが、下記サイトのサンプルのように クリックして直ぐにサブメニューが表示される、という方法は見つけられても 滑らかな動きを実現できる方法が見つかりません。 http://javascript.eweb-design.com/sample/s0701_1.html イメージとしては、 1.メニューをクリック 2.1秒後に上からズルズルっとサブメニューが表示される 3.メニューからマウスが離す 4.1秒後にズルズルっとサブメニューが上に戻る うまい表現方法が見つからず分りづらい質問となってしまいましたが アドバイスをいただけると助かります。宜しくお願いします。

  • fc2ブログに目次を作りたいと思っています。

    fc2ブログに目次を作りたいと思っています。 旅立ったネコさんの最期の姿をネコさんの告白スタイルで書いていたらかなりの長編になってしまいまいた。 http://nekonekowebsite.blog101.fc2.com/ やりたいなあと思っていることの目的は、読者さんが増えているので、 長くなった長編のブログを章ごとに分けていつでも読みやすく、 目に留まるようにしたいのです。 方法としては下記の3通りを考えています。 1)ブログのテンプレート部分に目次をつくる。 2)ブログのフリースペースに目次を作る。 3)「ネコネコウェブサイト」というサイトを持っていますので、そこに目次を作ってブログに飛ぶ。 http://nekonekowebsite.web.fc2.com/ やりたいことははっきりしているのですが、技術的なことはさっぱりわからないのです。 サイトもブログもこれが初めてでまだ半年も建っていない超初心者です。 やりかたをアドヴァイスいただけますようおねがいします。 上の1~3の方法以外にもいい方法があれば教えていただければうれしいです。

  • 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>

  • MTでjQuery、プルダウンメニューを表示させたい。

    超初心者的な質問なのですがアドバイスを頂きたく書き込みさせて頂きます。 MovableTypeにjQueryを設置して プルダウンメニューを表示させようと考えております。 jQueryの設置でつまづいてます。 http://allabout.co.jp/internet/javascript/closeup/CU20071020A/index2.htm ここで言う自分のコードとは何でしょうか? 検索しましたが解決しませんでした。 よろしくお願いします。

  • CakePHPでjQueryを使うには

    ローカル環境にてCakePHPでwebサービスを制作しています。 ブラウザでviewを確認しながら構築しているのですが、この環境でgoogleAPIのjQueryを動作させることは出来るのでしょうか? もしできるとしたら、 <?php echo $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> で動かないのは何が問題なのでしょうか? また、googleAPIを使わない方法でも以下のように試しましたが、これも動かない原因はどこにあるのでしょうか? jQueryのホームページでver1.5のソースをコピーし作ったjQuery1.5.jsを、 webroot /jsに入れる。 Controllerに var $helpers=array('Ajax','Javascript'); を記述。 Viewに、 <?php echo $javascript->link('jQuery.1.5.js'); ?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> 宜しくお願いします。

  • JavaScriptによる目次の自動生成について

    現在、私はiswebにサイトをもっており、そのページで目次が自動生成されるようにしたいと考えています。 phpなどは利用できないのでjavascriptで何とかしたく、googleで検索したところ次のようなページを見つけました。 "Table of Contents script" http://www.quirksmode.org/dom/toc.html この方法を試してみたいのですが、解説が英語であり、何よりも私がjavascriptについてほとんど分かっていないため、どうしてもうまくいきません。 とりあえず、このページで紹介されているスクリプトと、これを機能させるために必要だという "getElementsByTagNames" http://www.quirksmode.org/dom/getElementsByTagNames.html のスクリプトを一つにして"toc.js"を作り、目次を自動生成させたいページの<head>部分に <script type="text/javascript" src="toc.js"></script> と記述してみました。 以上のやり方が正しいのかどうかも自信がありませんが、肝腎の、目次の表示のさせ方(目次を表示させたい箇所に何をすればいいのか)がよく分かりません。 <div id="innertoc">や<span>が鍵らしいのですが、どうもよく分かりません。 紹介ページのソースも覗き視ましたが、どうも肝腎の箇所が見当たりません。 分からないことだらけで申し訳ありませんが、解決法をご存知の方はぜひお教えください。 よろしくお願いします。

  • javascriptでプルダウンメニューの操作

    javascriptで、select/optionタグからなるプルダウンメニューから、マウスが外れたらプルダウンメニューが閉じるという動きを実装したいです。 select/optionからマウスアウトした際に、別のフォームにフォーカスを合わせる(これで無理やりプルダウンを閉じた状態にする)処理を書いているのですが、 これだと、optionから次のoptionタグにマウスが移動したときもマウスアウトと判定されてしまい、プルダウンの中身を選択する前にメニューが閉じてしまいます。 このあたりの問題をうまく解消できる描き方などありましたら教えて下さい。

  • jQueryの自動目次生成の設定について

    JavaScriptのjQueryのJqtocですが自動的に目次も開くようにすると1200ピクセル以下のモニターだと本文と重なってしまう不具合がでます。 1200以上の場合は不具合は出ません。 そこでこれを1200ピクセル以下のモニターでも重ならないように目次は、画面からはみだしてもいいので横スクロールで見れるように設定を変更したいのですが可能でしょうか? また逆に1900ピクセルほどのモニターで見ると本文と目次が離れすぎてしまいます。 できれば本文も目次も1200に固定してセンタリングできればと思っています。 できれば完全に1200pxに固定してどのモニターで見ても本文と目次が同じ位置で表示されるようにしたいです。 1000ピクセル以下の場合は目次は、重なる方のデメリットのほうが大きいのではみだしてもいいので横スクロールして見るようにしたいです。 初期の状態は画面全部に目次も入るように映す設定のようですが、目次は見えなくても良いので重ならないで横スクロールするようにしたいです。 どこを変更すればいいのかわかりません。 よろしくお願いいたします。

  • jquery自体をJavaScriptで読み込む

    以下のようなものを想定して、jquery.js という中身がjqueryでないものから jqueryの実態を読み込みをさせようとしているのですが、うまくいきません。 ・jquery 2以降は、IE8以前をサポートしなくなるので、useragentで  読み込むjqueryを選択したい。 ・現在、CGIスクリプト上で、jqueryの読み込みを判断しているが、できれば  外部JavaScriptで巨大なjqueryの読み込みの判断をさせたい。 ・キャッシュされたとしても、ライブラリであることから、圧縮して70kバイトと  あまりにも巨大である ・(googleapiを利用すると、IE8以前では、プライバシーの警告が出る場合がある) 確かに、スマホにjqueryを普通に読み込ませても、何も問題なく動作しますが、 相当がんばって圧縮をしても70kバイト程度のライブラリを、使用しないのに 読み込むというのも気が引ける部分もあります。 何とか、動的に、かつ、何も問題なく、jqueryをJavaScriptで読み込む方法は あるでしょうか? このようなコードは、document.bodyがnullであるため、はじかれてしまいます。 var script = document.createElement('script'); script.src = 'http://hoge/jquery-1.js'; document.body.appendChild(script); var callee = arguments.callee; var interval = setInterval(function() { if (!document.evaluate) return; clearInterval(interval); interval = null; callee(); }, 100); このコードでも、jqueryを使用するものが、jQueryがないというエラーで、うまくいきません var scrptE = document.createElement("script"); scrptE.setAttribute("type", "text/javascript"); scrptE.setAttribute("language", "JavaScript"); scrptE.setAttribute("src", "http://hoge/jquery-1.js"); document.getElementsByTagName("head")[0].appendChild(scrptE); 以下のようなのは、googleapiのため、使わないものと考えます。 http://phpjavascriptroom.com/?t=ajax&p=jquery よろしくお願いします。