Javascript 使用媒体查询操作jquery accordion

您好，我在使用jQuery手风琴时遇到了困难。我想在移动平台上使用jQuery手风琴显示内容，并在更大的屏幕上销毁手风琴。除了两个问题外，一切正常

只有在文档窗口重新调整大小时，手风琴才会被销毁，而在加载文档时，手风琴不会被销毁

一旦手风琴被销毁，当我将文档窗口调整为移动大小时，我就无法使手风琴再次工作

下面是一些代码：

<div class="content-wrap">
            <div class="container">
                <div class="row">
                    <div class="content-fill">
                        <div class="content">
                            <div class="testimonials col-md-6 col-lg-6">
                                <h1>section 1</h1>
                                <p>this is a paragraph</p>
                            </div>
                            <div class="social col-sm-6 col-md-3 col-lg-3">
                                <h1>section 2</h1>
                                <div class="social-wrap">
                                    <a class="twitter-timeline" width="100%" data-chrome="transparent noscrollbar" href="https://twitter.com/xxxxxx" data-widget-id="383311602641952769">Tweets by @xxxxxx</a>
                                </div>
                            </div>
                            <div class="news col-sm-6 col-md-3 col-lg-3">
                                <h1>section 3</h1>
                                <p>this is a paragraph</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

  // <![CDATA[
     var $ = jQuery.noConflict(); $(document).ready(function()
    { 

        $('.content').addClass('accordion');

        $(window).resize(function() {
            if ($('.social').css('float') == 'left')    {
                $('.content').accordion('destroy');
            } else if($('.social').css('float') == 'none')   {
                $('.content').accordion('enable');
            }
        });

         $(".accordion").accordion({
            collapsible: true,
            header: "h1",
            heightStyle: "fill",
            });

            //getter variables
            var collapsible = $(".accordion").accordion("option","collapsible");
            var header = $(".accordion").accordion("option","header");
            var heightStyle = $(".accordion").accordion("option","heightStyle");

            $('.carousel').carousel({ interval: 4000, cycle: true }); 

        }); // ]]>

第一节
这是一段

第二节
第三节
这是一段

// 

将

销毁

替换为

禁用

，并将处理程序也添加到

加载

事件：

function accordionSwitch() {
    if ($('.social').css('float') == 'left')    {
        $('.content').accordion('disable');
    } else if($('.social').css('float') == 'none')   {
        $('.content').accordion('enable');
    }
}

$(window).on('resize load', accordionSwitch);

说明

destroy

方法

完全删除手风琴功能。这将使元素返回其初始前状态

---

那么，为什么不使用媒体查询在大屏幕上隐藏手风琴并在“小”屏幕上显示呢

您的默认样式是

.accordion {
    display: none;
}

---

不要启用和破坏你的手风琴。只需根据屏幕大小运行不同的功能。这将是最简单的解决方案，这样您就不必在屏幕上运行调整大小的功能。

我不直接使用媒体查询，因为我使用的是引导。在引导中，浮动行为直接链接到媒体断点。使用float会更有意义，这样函数的行为可能会改变内容的行为。听起来很奇怪，但使用on（）resize and load可以解决部分问题，还可以使用disable。我添加了几个其他函数来进一步解决这个问题。谢谢你的贡献

.accordion {
    display: none;
}