###前提・実現したいこと
jQueryを使ったレスポンシブなアコーディオンUIを実現したい。
http://www.raitonoveru.jp/howto/01.html
のページに試験段階のものを実装しています。
###発生している問題・エラーメッセージ
iPhoneでは、フリックでスクロールすると、アコーディオンが勝手に閉じてしまう。
###該当のソースコード
HTMLコード
<div class="accordion"> <section> <h2 class="hiraku"><span class="wrap">テキスト</span></h2> <ul class="navi2"> <li>テキスト </ul> <h2 class="hiraku"><span class="wrap">テキスト</span></h2> <ul class="navi2"> <li>テキスト </ul> </section> </div>JavaScriptコード
$(function(){
var mokuzi = $('.accordion ul');
var midasi = $('h2');
var switchPoint = 768;
// アコーディオン操作 $(midasi).on('click', function(e){ if($(this).hasClass('active')) { $(this).next(mokuzi).slideUp(); $(this).removeClass('active'); } else { $(this).next(mokuzi).slideDown(); $(this).addClass('active'); } }); // Windowリサイズでアコーディオンの開閉 $(window).resize( function() { moveMainnav(); } ); function moveMainnav() { if(window.innerWidth < switchPoint){ $(mokuzi).hide(); $(midasi).removeClass('active'); } else { $(mokuzi).show(); $(midasi).addClass('active'); } } moveMainnav();
} );
###試したこと
$(function(){
var mokuzi = $('.accordion ul');
var midasi = $('h2');
var switchPoint = 768;
// アコーディオン操作 $(midasi).on('click', function(e){ if($(this).hasClass('active')) { $(this).next(mokuzi).slideUp(); $(this).removeClass('active'); } else { $(this).next(mokuzi).slideDown(); $(this).addClass('active'); } }); $(window).load(function(){ function moveMainnav() { if(window.innerWidth < switchPoint){ $(mokuzi).hide(); $(midasi).removeClass('active'); } else { $(mokuzi).show(); $(midasi).addClass('active'); } } // Windowリサイズでアコーディオンの開閉 $(window).on('resize', function(){ moveMainnav(); } ); moveMainnav(); });
} );
というコードに変更したのですが、同じ挙動になります。
動作を見る限り、タッチしたh2タグがずっとフォーカスされ続けられているような状態であり、ページ中のどの場所をタッチしても、このh2タグをタッチしたものと認識され、アコーディオンが閉じられているような状態です。
###補足情報(言語/FW/ツール等のバージョンなど)
最新のjQuery v2.2.3を使っています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/12 02:15