• 締切済み

特定のページの特定部分が閉じないアコーディオン

jqueryを使用して以下の処理をしようと思っています。 リンク先に飛んだ際、リンク先のurl又はタイトル名部分のアコーディオンは、閉じていず他の部分が閉じているようにしたい。 問題点は、url名または、タイトル名の取得の仕方が不明な点です。 力を貸していただけたら幸いです。 $(function() { var i; i=1;     if (url==該当のurl)←問題点、ここにurlを取得した変数を入れたいのですがどうやって取得するのか不明です。 { i=2; $('#accordion dd').hide().eq(i).show();          $('#accordion dt a').click(function(){          $('#accordion dd').slideUp();          $(this).parent().next().slideDown();          return false;      }); } else if (url2=url2) { i=3; $('#accordion dd').hide().eq(i).show();          $('#accordion dt a').click(function(){          $('#accordion dd').slideUp();          $(this).parent().next().slideDown();          return false;      }); } });

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

ANo1です。 >TEST_Accordion.dwtの部分のみ取得したいのですがどうすればよろしいのでしょうか 方法はいろいろあるかと思いますが… 正規表現を利用した例   location.href.match(/[^/]+$/)   https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec  http://www.ecma-international.org/ecma-262/5.1/#sec-15.10 前回も上げましたが、参考サイトはスクリプトのドキュメンテーションサイトですので、何かを調べたいときにご利用ください。(前者はmozilla系、後者はECMAのスタンダードです)

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

開いているHTML文書の自身のURLを取得したいという意味でよいしょうか? locationオブジェクトを利用してください。  location.href  https://developer.mozilla.org/ja/docs/Web/API/window.location

seiza2014
質問者

お礼

素早い回答ありがとうございます。 さっそく、試してみます。

seiza2014
質問者

補足

さっそく試させていただきました。 var ur; ur=location.href var i; i=1; alert(ur); 上記の様にプログラムを記載しました下記のアドレスが表示されました。 当方としては、TEST_Accordion.dwtの部分のみ取得したいのですがどうすればよろしいのでしょうか? file:///C:/Users/suih/Desktop/%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A4%E3%82%A9%E3%83%B3TEST/draamweber%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A4%E3%82%A9%E3%83%B3%E6%A9%9F%E8%83%BD/Templates/TEST_Accordion.dwt また、 教えていただいたリンク先のサイトの情報を参考に下記のように変更しましたが うまくいきませんでした。   var ur; ur=location.hostname var i; i=1; alert(ur); よろしければご助力いただければ幸いです。

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

関連するQ&A

  • アコーディオンメニューをブラウザー幅で変更したい

    下記のようにHTMLを組んでjQueryを使ってアコーディオンメニューを作りました。 <dl id="List"> <dt>タイトル</dt> <dd>詳細テキスト</dd> <dt>タイトル</dt> <dd>詳細テキスト</dd> <dt>タイトル</dt> <dd>詳細テキスト</dd> </dl> jQueryは下記の通りで検索して見つけたものを使わせていただきました。 jqueryのバージョンは「1.10.1」。 $(function(){ $('#List dd').hide(); $('#List dt').click(function() { if($(this).next('dd').is(':visible')) { $(this).next('dd').slideUp(300); } else { $(this).next('dd').slideDown(300).siblings('dd').slideUp(300); } }); }); これでdtのタイトルをクリックするとdd部分が表示され、 別のdt部分をクリックすれば、先に開いていたdd部分が隠れて、 クリックしたdtの下部にあるdd部分を表示するというように 問題なく機能してくれました。 これを活かしつつ、レスポンシブのようにしたいなと思ったのです。 仕様としては、パソコンで見る時はdd部分を隠さず表示して、 ブラウザー幅が480pxに以下になったら、 dd部分を隠してアコーディオンとして機能させたい、 と思いました。 プログラムは初心者ゆえ、ライブラリの応用しかできず、 検索で見つけ出したのが下記のようなソースです。 $(function() { var w = $(window).width(); var x = 480; if (w <= x) { } }); これに上のアコーディオン用のソースを合体させればいけるのではないか? と漠然と思って(確証がもてるはずもなく…)下記のようにしてみました。 $(function() { var w = $(window).width(); var x = 480; if (w <= x) { $('#kuchikomiList dd').hide(); $('#kuchikomiList dt').click(function() { if($(this).next('dd').is(':visible')) { $(this).next('dd').slideUp(300); } else { $(this).next('dd').slideDown(300).siblings('dd').slideUp(300); } }); } }); 動いてくれそうな気がしたのですが、 全く動いてくれませんでした(涙) この情報だけを見て、 間違っている箇所がお分かりになる方がいらっしゃいましたら、 ぜひともご教授いただきたいのですが… よろしくお願いいたします。

  • Jqueryでのアコーディオン について

    Jqueryでのアコーディオンのリンク について教えていただければ幸いです。 下記のアコーディオンを メニュー1をクリックするとリンク先に飛び さらに、アコーディオンが開くようにしたくて下記のアコーディオンを 作りましたが、 そのように、機能しませんでした。 全ての<a> タグにリンクを設定してみました。 ですが、 「サブメニュー」のリンクは機能するのですが 「メニュー1」等のリンクは機能しませんでした。 具体的には、リンク先に飛ばないまま、 アコーデイォンが開いてしまいます。 どうすれば、サンプル.html (dtタグ部分)をクリックするとリンク先に飛び さらに、アコーディオンが開くようになるのでしょうか? もし、ご存じの方がいましたら力を貸していただければ幸いです。 よろしくお願いします。 $(function() { $('#accordion dd').hide(); $('#accordion dt a').click(function(){ $('#accordion dd').slideUp(); $(this).parent().next().slideDown(); return false; }); }); <dl id="accordion"> <dt><a href="サンプル.html">メニュー1</a></dt> <dd> <a href="#">サブメニュー1-1.html</a> <a href="#">サブメニュー1-2.html</a> </dd> <dt><<a href="サンプル.html"></dt> <dd> <a href="#">サブメニュー2-1.html</a> <a href="#">サブメニュー2-2.html</a> </dd> <dt><<a href="サンプル.html"></dt> <dd> <a href="#">サブメニュー3-1.html</a> <a href="#">サブメニュー3-2.html</a> </dd> </dl>

  • アコーディオンメニューの開閉制御

    私webデザイナーをしています。 アコーディオンメニューで(開くのは1つのパネルのみ)ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。 しかし、下記のコードでどうしても実装できません。 技術のある方、間違いを教えていただけないでしょうか? 【html】 <dl class="accordion_dl"> <dt>アコーディオンメニュー.1</dt> <dd>アコーディオンメニュー.1のテキスト表示</dd> <dt>アコーディオンメニュー.2</dt> <dd>アコーディオンメニュー.2のテキスト表示</dd> <dt>アコーディオンメニュー.3</dt> <dd>アコーディオンメニュー.3のテキスト表示</dd> <dt>アコーディオンメニュー.4</dt> <dd> <ul> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> </ul> </dd> </dl> 【JS】 jQueryとjquery.cookie.jsを読み込んでいます。 for (var i=0; i < $(".accordion_dl dt").length; i++) { if( $.cookie("accord" + i) == "open" ) { $(".accordion_dl dt").eq(i).next("dd").show(); } } $('.accordion_dl dt').click(function(){ $(this).toggleClass("open"); $(this).siblings("dt").removeClass("open"); $(this).next("dd").slideToggle(); $(this).next("dd").siblings("dd").slideUp(); n = $(".accordion_dl dt").index(this); if ($.cookie("accord" + n) == "open") { $.cookie("accord"+n,"close", {path:"/"}); } else { $.cookie("accord"+n,"open", {path:"/"}); } }); よろしくお願いいたします。

  • アコーディオンメニューについて

    jQueryを使ったアコーディオンメニューを作成しているのですが、 <dt>をクリックすると<dd>部分に外部のテキストファイルを表示させる方法がわかりません。 以下の記述に何を付け足せば良いのですか? $(function(){ $("dd:not(:first)").css("display","none") $("dt:first").addClass("selected"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); $("dt").removeClass("selected"); $(this).addClass("selected"); } }).mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }) }) <dl> <dt>Step.1</dt> <dd><p>Lorem ...(中略)... venenatis.</p></dd> <dt>Step.2</dt> <dd><p>Integer ...(中略)... accumsan. </p></dd> <dt>Step.3</dt> <dd><p>Integer ...(中略)... imperdiet. </p></dd> </dl>

  • Jquery アコーディオンについて

    知恵袋、Web初心者です。 Jquery / アコーディオンについて質問です。 Jqueryを使って2段のアコーディオンメニューを実装しているのですが、 1つのアコーディオンを押すと他のアコーディオンが閉まる様設定したいです。 現在下記の様に記述しています。 ----------------------------------------- $(document).ready(function(){ $('.accordion').click(function() { $('.accordion').next().slideUp(); $(this).next().slideToggle(); }).next().hide(); }); ---------------------------------------- この記述ですと2段目のアコーディオンを押すと1段目も閉じてしまい、結果的に2段目も見えなくなってしまう、 という状況です。 2段目だけ機能させる事は可能でしょうか?? 質問が分かりにくかったら申し訳ありません。 初歩的な質問かも知れませんが、ご教授頂ければ幸いです。 よろしくお願い致します。

  • jQueryでアコーディオンメニュー

    質問させてください。 jQueryを使用してアコーディオンメニューを作成しているですが、上手くいきません。 ソースは以下のように記載しました。 (jQuery) <script type="text/javascript"> $(function(){ $("dd:not(:first)").css("display", "none"); $("dl dt").click(function(){ if($("+dd", this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd", this).slideDown("slow"); } }); }); </script> (HTML) <dl> <dt>Step.1.</dt> <dd><p>aaaaa</p></dd> <dt>Step.2.</dt> <dd><p>bbbbb</p></dd> <dt>Step.3.</dt> <dd><p>ccccc</p></dd> </dl> 上記の場合、if()の中の$("+dd", this).css("display")がundefinedになるためチェックが正常に行われません。 どのように修正すればよいのでしょうか。 お手数ですがお知恵をお貸しください。お願いします。

  • アコーディオンjquery

    ロリポップのサーバーにアコーディオンjqueryをおいています。 以下のように設置すると、項目をクリックしたときに 下に展開されるのですが chromeだと、左に余白ができてしまいます。 ie9だと、変に余白ができて、テキストがおかしな挙動します。。。 なぜでしょうか? --------------- <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <script type="text/javascript" src="../jq01/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { $("dd").hide(); $("dt").click(function() { $(this).toggleClass("bg2"); $(this).next().slideToggle(); }); }); </script> </head> <body> <dt class="bg1">ああああああああああああああああああああああああああああ</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd> <dt class="bg1">うううううううううううううううううううううううううう</dt> <dd>えええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ</dd> <dt class="bg1">おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dt> <dd>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd> </body> </html>

  • アコーディオンメニューが他にも影響してしまう

    $(function(){ $("dd:not(:first)").css("display","none"); $("dt:first").addClass("selected"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); $("dt").removeClass("selected"); $(this).addClass("selected"); } }).mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }); }); <div class="accordion"> <dl> <dt>Step.1</dt> <dd><p>Lorem ipsum dolorturpis suscipit pretium. Aenean ultricies scelerisque dictum. Phasellus tincidunt, nibh lacinia facilisis aliquam, lacus quam condimens.</p></dd> <dt>Step.2</dt> <dd><p>Integer rhoncus felis mauris. Donec massa Donec elementum arcu tortor.ec at pellentesque mi. Mauris lobortis libero ac metus ultricies accumsan. </p></dd> <dt>Step.3</dt> <dd><p>Integer pretium porttitor lectus at tempor. Donec nec cursus elit. sit amet turpis Praesent feugiat est eu tellus dictum ac imperdiet nisi imperdiet. </p></dd> </dl> </div> 「jQueryデザイン入門」という本を読みながらアコーディオンメニューを作ってみたのですが、HTML内のほかのdd,dtも隠れたり現れたりしてしまいます(^^;) div class="accordion"のdd,dtに適用して他のdd,dtに影響しないようにするにはどのようにしたらいいのでしょうか?

  • jqueryによるアコーディオン表示

    http://liginc.co.jp/web/js/jquery/34048 上記サイトを参照してjqueryによるアコーディオン表示をやってみました。 上記サイトのデモではアコーディオンメニューをクリックするとその下に 「アコーディオンメニューが開く」という文字列が表示されます。 しかし、私の環境ではその文字列がアコーディオンメニューより右にずれて表示(下記表示イメージ) されてしまいます。 【表示イメージ】 アコーディオンメニュー1     アコーディオンメニュー アコーディオンメニュー2     アコーディオンメニュー アコーディオンメニュー3     アコーディオンメニュー 下記が実際に書いたHTMLなのですがCSSをどのように修正すればデモのように アコーディオンメニューが表示されますでしょうか。 また、下記サンプルではアコーディオンメニュー1が開いたときに表示する文字列を 改行しているのですが<BR>タグで開業すると1行目と2行目の間が大きく開いてしまいます。 line-height を調整すれば行間の隙間が調整できるのですが1行目の位置まで変更 されてしまいます。1行目の位置はそのままに、行間の隙間を調整することはできますでしょうか。 【HTML】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#acMenu dt").click(function() { $(this).next().slideToggle(); $(this).toggleClass("active"); }); }); </script> <title>CSS</title> <style type="text/css"> #acMenu dt{ display:block; width:250px; height:50px; line-height:50px; text-align:center; border:#666 1px solid; cursor:pointer; background:url(../images/i_swich.png) 220px -69px no-repeat; padding-right:15px; } #acMenu dd{ background:#f2f2f2; width:250px; height:150px; line-height:50px; text-align:center; border:#666 1px solid; display:none; } #acMenu dt.active{ background:url(../images/i_swich.png) 220px 18px no-repeat; } </style> </head> <body> <dl id="acMenu"> <dt>アコーディオンメニュー1</dt> <dd>アコーディオンメニュー1が開く。<BR>改行した。</dd> <dt>アコーディオンメニュー2</dt> <dd>アコーディオンメニュー2が開く。</dd> <dt>アコーディオンメニュー3</dt> <dd>アコーディオンメニュー3が開く。</dd> </dl> </body> </html>

    • ベストアンサー
    • CSS
  • アコーディオンが思い通りに動きません!

    こんにちは。色々試してもうまくいかないため、相談させて下さい。参考サイトの「accordion 31同時開閉タイプ」を実装しようとしているのですが、思い通りの挙動になりません。現状では、見出しをクリックすると全て開いてしまいますが、開くのはクリックしたものだけで、それ以外は閉じる仕様にしたいのです。 参考サイト http://pops-web.com/main/html/demo-007.html 私がやってみたもの http://otyame.chicappa.jp/test/ ---------------------------------------------------------- ●HTML <div id="categoryListBlock"> <ul id="main"> <li id="testlist01" class="category"> <dl> <dt>見出し1</dt> <dd> <ul id="fashionItem"> <li><a href="#">テストリスト</a></li> <li><a href="#">テストリスト</a></li> <li><a href="#">テストリスト</a></li> </ul> </dd> </dl> </li> <li id="testlist02" class="category"> <dl> <dt>見出し2</dt> <dd> <ul id="fashionItem"> <li><a href="#">テストリスト</a></li> <li><a href="#">テストリスト</a></li> <li><a href="#">テストリスト</a></li> </ul> </dd> </dl> </li> </ul> </div> ●Javascript $(function(){ //オブジェクトを保存 var accordionItem=$('#main'); //一旦全部消す accordionItem.find('dd').hide(); //active要素を指定して開く var no=0; accordionItem.find('dt').eq(no).addClass('active').next('dd').show(); //click-action accordionItem.find('dt').click(function () { //slide $(this).next('dd').slideToggle('slow') .siblings('dd:visible').slideUp('slow'); //activeクラス切り替え $(this).toggleClass('active'); $(this).siblings('dt').removeClass('active'); }); //hover-toggle accordionItem.find('dt').hover(function () { //toggle hoveredクラス $(this).toggleClass('hovered'); }); }); ---------------------------------------------------------- おそらくHTMLの構造が違うため「.siblings」というセレクタが上手く動作していないのかなと思われますが、このような場合どうしたら良いのでしょうか。 よろしくお願い致します。