2

このアコーディオンはスマートフォンでのみ動作し、小型デバイスでの使いやすさを向上させるという考えです。

ただし、ブラウザを 480 未満で更新した場合にのみ機能します。

ウィンドウのサイズが 480 未満に変更されるとすぐにブラウザを更新する機能を関数に含める方法はありますか?

ブラウザを手動で更新しても、まったく使用できなくなります。

var windowWidth = $(window).width(); //retrieve current window width
function accordion() {
if (windowWidth<=480)
{


$('h3').click(function() {

    $('h3').next().hide(2000);

    if($(this).next().is(':hidden') == true) {

          $(this).next().show(1000); } 


                         });

                    }}

$(document).ready(function() {
 accordion();
 });

HTML マークアップ

                    <section class="box">

                        <h3>Service 1</h3>

                       <div class="box2"> <p></p></div>

                    </section><!-- end box_1 --> 

                    <section class="box">

                        <h3>Service 2</h3>

                        <div class="box2"><p></p>   </div>                     

                    </section><!-- end box_2 --> 

                    <section class="box">

                        <h3>Service 3</h3>

                        <div class="box2"><p></p>   </div>                     

                    </section><!-- end box_3 -->  

                    </section>
4

1 に答える 1

0

最初のウィンドウ幅のみを取得しています。

$(window).resize(function () { windowWidth = $(this).width(); });

また、ウィンドウが再び広がる場合は、適切に実行accordionしてオフにする必要があります。accordionメソッドにへの呼び出しを追加するだけwindow.resizeで十分かもしれませんが、私はそれをテストしていません。

于 2012-06-13T16:35:58.890 に答える