适用于智能手机的 jQuery Accordion

Question

这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用， visit the help center 。

已关闭 11 年前。

这个想法是，这个 Accordion 仅适用于智能手机，以提高小型设备的可用性。

但是，只有在 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>

Answer 1

您仅获得初始窗口宽度。

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

您还需要适本地运行 accordion 并在窗口再次变宽时将其关闭。也许只需在 window.resize 方法中添加对 accordion 的调用就足够了，但我还没有测试过。