- ベストアンサー
JQueryで$("dt span")クリック動作
JQueryで$("dt span")をクリックしたときに 隣接するddタグの部分を表示させるには以下の記述を どのように修正すればよいのでしょうか？ <html> <head> <style type="text/css"> dl { margin-bottom: 20px; } dd { display: none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("dt span").click(function(){ $("+dd",this).slideToggle(); }); }); </script> </head> <body> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> </body> </html> ご存じの方がおられましたらご回答をよろしくお願いします。
- nana_watuki
- お礼率61% (142/232)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
存じてはいませんが… $(function(){ $("dt span").click(function(){ $(this).parent().next("dd:first").slideToggle(); //以下おまけ //var str = $(this).html(); //$(this).html(str=="開く"?"閉じる":"開く"); }); });
関連するQ&A
- jQuery 読み込んだ外部htmlファイル内での関数の実行ができない
jQuery 読み込んだ外部htmlファイル内での関数の実行ができない お世話になります。 iwatuturuturu と申します。 jQueryで読み込んだ外部htmlファイル内での関数の実行ができません。 ［index.html］にてjQueryのloadを使用し、同じ階層内の［basic.html］のファイルを読み込んでいます。 slideToggleをしようしてアコーディオンをつけたいのですが、外部htmlの［basic.html］のアコーディオンみ動きません。 【ソース［index.html］】------------------------------------------------------------ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="../js/jquery.js"></script> <script> $(function(){ //外部ファイルの読み込み $("#basic").load("basic.html"); // アコーディオン $('dt').click(function(){ $(this).next().slideToggle('slow'); }); }); </script> </head> <body> <dl class="accordion"> <dt>アコーディオン</dt> <dd>ここの表示非表示が切り替わる</dd> </dl> <div id="basic"></div> </body> </html> 【ソース［basic.html］】------------------------------------------------------------ <div style="border:1px solid #666666"> <p>読み込み込まれるテキスト</p> <dl class="accordion"> <dt>ここをクリック</dt> <dd>ここの表示非表示が切り替わる</dd> </dl> </div> ------------------------------------------------------------------------------------ もともと外部より読み込まれたファイル内のjavasicriptは実行されない仕様なのでしょうか？ また、他のやり方で同じ動作を実現する方法などありましたらご教授お願い致します。 よろしくお願いいたします。
- 締切済み
- JavaScript
- アコーディオン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>
- 締切済み
- JavaScript
- JQueryでクリック時のタグの親子の関係について
以下のコードのspanをクリックするとspanとdivをクリックしたことになってしまいます。 spanをクリックしてもdivをクリックしたことにしないようにするには どうすればよいのでしょうか？ <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style> div { padding: 20px; background: #EEE; } </style> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(function(){ $("div").click(function(){ console.log("click div"); }); $("span").click(function(){ console.log("click span"); }); }); </script> </head> <body> <div> <span>Click!</span> </div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryにてアコーディオン機能実装について
皆様、いつもお世話になります。 現在jQueryを使ったアコーディオン機能の実装を勉強しています。 下記、サイトを参考に実装してみたのですが、要望どおりの挙動にならず困っています。 【参考サイト】 http://web-pc.net/jquery010 【質問内容】 ページロード時に、全てのリストが開いてしまっている。 要望する挙動は以下ページのとおり、ページロード時は全てのリストが閉まっている状態にしたい。 http://sample.web-pc.net/accordion/# ソースは以下のとおりです。 【javascript】 <!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $(".schedule_list dt").click(function(){ $(this).next("dd").slideToggle(); $(this).children("div").toggleClass("open"); }); }); </script> 【HTML】 <div> <dl class="schedule_list"> <dt> <div> <span> <span>★</span> <span>▲▲</span> <span>画像</span> </span> </div> </dt> <dd> <div> <table> <tr> <td> <img src="▲"> </td> <td> <div> <a href=""><img src="▲" /></a> </div> </td> </tr> </table> </div> </dd> </dl> </div> 【CSS】 dl.schedule_list { display:block; } dl.schedule_list dt div { width:546px; height:61px; display:block; background-image:url(★);} dl.schedule_list dt div.open { width:546px; height:61px; display:block; background-image:url(★);} 以上です。 どなたかお詳しい方ご教授のほどよろしくお願いいたします。 開発環境： MacOSX yosemite Dreamweaver CC Safari8.0
- ベストアンサー
- JavaScript
- jqueryにてrssを取得して表示
初心者です。 下記コードで指定した情報を得て表示させることができるのですが、url部分を書き換え、rssを見に行かせると表示されなくなります。 ただし、ローカルの環境(MacOSX)でsafariで表示させた時には表示されます。 （しかし、safariでもサーバにアップすると表示されません） どの環境でも表示させたいのですが、どうすればいいでしょうか？ どなたか詳しい方、ご教示ください。よろしくお願いいたします。 （一部ダミーの日本語に置き換えて説明しています） url: 'ファイル名.xml', → 表示OK url: 'http://feedblog.ameba.jp/rss/ameblo/フォルダ名/rss20.xml', → ローカル環境でsafariのみOK ---ここから <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample3</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ url: 'ファイル名.xml', dataType: 'xml', success : function(data){ $("item",data).each(function(){ $("dl").append("<dt><a href='"+$("link",this).text()+"'>"+$("title",this).text()+"</a></dt><dd>"+$("description",this).text()+"</dd>"); }); } }); }); </script> </head> <body> <dl></dl> </body> </html>
- ベストアンサー
- JavaScript
- 【jQuery】jQuery Masonry
この度jQueryで壁にぶつかり、質問させて頂きます。 現在開発中のWEBサービスにて、jQuery Masonryとアコーディオン機能を組み合わせたページを構築する流れとなっております。 画面イメージとしては・・ Pinterestにアコーディオン機能が付いており、各帯をクリックする毎に内容が表示される機能です。 【Point】横幅は制限がありますが、縦幅には制限が無く、アコーディオンが開閉する毎にグリッド部分の再構築（ムーブアクション）を行いたいのですが、それが上手くいきません。 参考サイト：http://goo.gl/QLQI7 実際のソース（抜粋）： <script> jQuery(function(){ var $container = $('#container'); $container.imagesLoaded( function(){ jQuery('#container').masonry({ itemSelector: '.item', isAnimated:true }); }); }); </script> <script> jQuery(function () { jQuery("dd").css("display","none"); jQuery("dl dt").click(function(){ var cont = jQuery(this).next(); if(jQuery(cont).css("display")=="none"){ jQuery("dd").slideUp("slow"); jQuery(cont).slideDown("fast"); jQuery("dt").removeClass("select"); jQuery(this).addClass("select"); } }).hover( function(){jQuery(this).addClass("over");} ),( function(){jQuery(this).removeClass("over");} ); }); </script> <div id="container"> ～ここから～ <div class="item"> <dl> <dt>タイトル1</dt> <dd>本文1</dd> <dt>タイトル2</dt> <dd>本文2</dd> <dt>タイトル3</dt> <dd>本文3</dd> </dl> </div> </div> ～ここまでがLoopで複数のデータが表示される～ なお、jQuery初心者でして具体的な構文までをサポート頂けますと幸いです。 よろしくお願い致します。
- ベストアンサー
- CSS
- スマホ表示でのjQueryの挙動がおかしい
jQueryで該当箇所をクリックすると、CSSで非表示にしていた部分を開く動作を実装したいのですがうまくいきません。 ちなみにWordPressで制作をしております。 スマホでタップすると閉じていた箇所が開くところまではいいのですが、勝手に閉じてしまいます。 PC表示では勝手に閉じる動作はありません。 解決策を教えていただけますと大変助かります。 どうぞよろしくお願いします。 ■固定ページ編集画面内の本文エリアに、下記コードを入力しました。 <script> $(function(){ $(“#list dt").on("click", function() { $(this).next().slideToggle(); }); }); </script> <div id="list”> <dl> <dt>あああああ</dt> <dd>いいいいい。</dd> </dl> ※WordPressのjQueryはv1.11.0です。
- ベストアンサー
- JavaScript
- ｊQuery
http://ascii.jp/elem/000/000/498/498710/ 上記サイトの6page目をみて、サイトに手順のあるｊQuerｙアコーディオンを作成しようとおもったのですが、クリックすると２番目と3番目のｄｄの部分が表示されるのですが、私のは最初からｄｄの画像が 3枚とも表示されています。 私の作成したサイトのｈｔｍｌ、ｃｓｓの記述は以下です。 また、ｊｓフォルダにはjquery.animate-colors-min と jquery.easying.1.3と jquery.skitterと jquery-1.6.3.minが入っていて、jqueryskitterをダウンロードしたときのものです。それが間違いでしょうか？ 上記サイトでは他のバージョンを使っているので、それをダウンロードしないとダメなのでしょうか？ <script>の記述が間違っているのでしょうか？ 何卒ご教授お願い致します。 ○ｈｔｍｌ部分 <!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> <link href="all.css" rel="stylesheet" type="text/css" media="all" /> <script type="test/javascript" src="js/jquery-1.6.3.min.js"></script> $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); }); </head> <body> <dl> <dt>course</dt> <dd> <p><img src="image/menu1_03.jpg" width="728" height="515" /></p> </dd> <dt>a la calt</dt> <dd> <p><img src="image/menu2_03.jpg" width="763" height="560" /></p> </dd> <dt>waine</dt> <dd> <p><img src="image/manu3_03.jpg" width="763" height="561" /></p> </dd> </dl> </body> </html> ○CSS部分*他のhtmlページともリンクしているため、下記以外にも書いてあります *{ margin:0; padding:0; } a imag{ border:none; } dl{ width:763px; margin:50px auto; } dl dt{ background:#7CADB6; border-bottom:1px solid #FFFFFF; cursor:pointer; } dl dd{ border:1px solid #7CADB6; border-top:none; height:561px; }
- ベストアンサー
- JavaScript
- jqueryによるアコーディオン表示
http://liginc.co.jp/web/js/jquery/34048 上記サイトを参照してjqueryによるアコーディオン表示をやってみました。 上記サイトのデモではアコーディオンメニューをクリックするとその下に 「アコーディオンメニューが開く」という文字列が表示されます。 しかし、私の環境ではその文字列がアコーディオンメニューより右にずれて表示(下記表示イメージ) されてしまいます。 【表示イメージ】 アコーディオンメニュー１ アコーディオンメニュー アコーディオンメニュー２ アコーディオンメニュー アコーディオンメニュー３ アコーディオンメニュー 下記が実際に書いたHTMLなのですがCSSをどのように修正すればデモのように アコーディオンメニューが表示されますでしょうか。 また、下記サンプルではアコーディオンメニュー１が開いたときに表示する文字列を 改行しているのですが<BR>タグで開業すると１行目と２行目の間が大きく開いてしまいます。 line-height を調整すれば行間の隙間が調整できるのですが１行目の位置まで変更 されてしまいます。１行目の位置はそのままに、行間の隙間を調整することはできますでしょうか。 【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
- ｊQueryでアコーディオンメニュー
質問させてください。 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になるためチェックが正常に行われません。 どのように修正すればよいのでしょうか。 お手数ですがお知恵をお貸しください。お願いします。
- ベストアンサー
- JavaScript
お礼
早速試したところ問題なく動作しました。 三項演算子のおまけもすっきりしていて どこかで利用できそうです。 ご回答いただきどうもありがとうございました。