スマホ表示でのjQueryの挙動がおかしい
- jQueryを使用してスマホ表示での要素の開閉機能を実装したいが、うまくいかない
- WordPressで制作しているが、スマホで要素をタップすると開いたり閉じたりするが、勝手に閉じてしまう
- 解決策を教えてほしい
- ベストアンサー
スマホ表示での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です。
- mabatakiki
- お礼率75% (9/12)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Clickイベントを拾おうとしているからではないでしょうか。 http://text.moroya.net/entry/2013/05/06/122013 （ちょっと古いですが） tapとかtouchとかの関連イベントを拾うといけるような気がします。 使う場所によってiPhone/Androidで共通の書き方でいけないこともあるので色々組み替えて頑張ってください。
関連するQ&A
- 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> ご存じの方がおられましたらご回答をよろしくお願いします。
- ベストアンサー
- JavaScript
- 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 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をおいています。 以下のように設置すると、項目をクリックしたときに 下に展開されるのですが 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のmouseoutについての質問です。
jQueryの質問です。 dtにマウスを合わせた時にddが表示し、dlの領域以外にマウスが外れるとdd が非表示させるような設定をしたいのですがうまくいきません。 子要素のddとかdtとかaに合わさるとすぐに非表示になってしまいます。 dl内は、どこを移動しても非表示にならずdl要素以外の箇所にマウスが合わ さった時に非表示になってほしいのですが どなたかアドバイスいただけないでしょうか？ 自分なりにはこのように記述してみました。 ■jQueryの記述 $(function(){ $("dt").mouseover(function(){ $("dd:not(:animated)").slideDown("slow"); }); $("dl").mouseout(function(){ $("dd:not(:animated)").slideUp("slow"); }); }); ■CSSの記述 <dl> <dt>スライドして表示状態を切り替える</dt> <dd> あああ<a href="#">ああああ</a>あああああああ ああああああああああああああああああああああああああああああああああ あああああああああああああ<a href="#">ああああ</a>あああああ<a href="#">ああ</a>あああああ </dd> </dl> デモURL： http://tegarude.web.fc2.com/faq/test.html
- 締切済み
- インターネットビジネス
- jqueryをスマホの時だけ動作させたい
jqueryをスマホの時だけ動作させたいのですが、どう記述すればよいかご教示お願いいたします。 コピペOKの情報サイトからアコーディオンメニューのやり方を拝借したのですが、 PCでは動作させず、スマホで見た時だけアコーディオンにしたいと思っています。 素人ながら調べてやってみても思うようにいきません。 どなたか下記にどう追加すればよいか教えていただけないでしょうか。 宜しくお願い致します。 <script> $(function() { $('●●').each(function() { $(this).on('click', function() { $(this).toggleClass('on'); $("●●", this).slideToggle() return false; }); }); }); </script>
- 締切済み
- 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
- ｊ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
- jQueryで条件が正の場合にクラスを追加
開閉式のリストを作成しています。 ツリーが閉じている場合は+の画像、開いている場合は-の画像を表示させる為、 jQueryで条件が正の場合のみクラスを追加したいです。 if文を挿入するとクラスの追加が反映されません。 #.jsコード ----------------------------------------------------- $(document).ready(function() { $("dd").css("display","none"); $("dt").click(function(){ $(this).next().slideToggle("fast"); if(! $("dd").css("display","none") ) { $("dd").addClass("aaa"); } }); }); ----------------------------------------------------- ↑上記コードでddにaaaクラスがある場合画像、cssで背景画像を表示したいです。 #.htmlコード ----------------------------------------------------- <dl> <dt>ここの画像を変更させたいです。</dt> <dd> ここを開閉させたいです。 </dd> </dl> ----------------------------------------------------- よろしくお願い致します。
- 締切済み
- 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
お礼
お礼が遅くなりすみません>< なんとか出来ました！ この度は本当にありがとうございました！