Jquery手风琴在移动滚动上折叠答案

【问题标题】：Jquery accordion collpasing on mobile scrollJquery手风琴在移动滚动上折叠
【发布时间】：2017-07-11 03:49:33
【问题描述】：

我正在使用this accordion-style plugin 来展开和折叠网格每一行下的内容，例如谷歌图片。

在我的电脑上一切正常，但是当您在 iOS 设备上查看时，展开的内容会在您滚动时折叠。如果您在 iOS 设备上检查，您可以在上面的链接中看到问题。（Android 中也可能存在此问题，但我无法访问该设备。）

滚动问题是由这个resize函数引起的：

    // adjust colio viewport height on window resize
    $(window).bind('resize orientationchange', function(e){

        // stop propagation if colio is event target
        if(e.target === self.markup.get(0)) {
            e.stopImmediatePropagation();
        }

        // for 'inside' placement hide viewport immediately on resize
        if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {
            self.insideHideViewport();
        }

        // disable page scroll during window resize
        if(!self.temp) {
            self.temp = [self.settings.syncScroll, self.settings.scrollPage];
        }
        self.settings.syncScroll = true;
        self.settings.scrollPage = false;

        // adjust viewport height
        clearTimeout(self.resize_timer);
        self.resize_timer = setTimeout(function(){
            self.expandViewport(self.active_id, true);
            self.settings.syncScroll = self.temp[0];
            self.settings.scrollPage = self.temp[1];
            delete self.temp;
        }, 200);

    });

更具体地说，问题似乎只出在这一行：

// for 'inside' placement hide viewport immediately on resize
            if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {
                self.insideHideViewport();
            }

如果我只删除该部分，它会修复它。但问题是，我使用的是“内部”放置，因此当您调整浏览器大小或更改设备方向时，此代码对于隐藏展开的 div 是必要的。否则它看起来很不稳定，因为高度计算已关闭。

似乎将移动滚动视为调整窗口大小。

您能否找到一种方法来修改此代码以保持调整大小时隐藏功能，同时解决在移动设备上滚动时导致的问题？

【问题讨论】：

滚动问题是由这个resize函数引起的：什么问题？控制台上的任何错误？ e.type 是否在条件中定义，if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type))??
控制台中没有错误。问题就是我所描述的——当您在移动设备（至少是 iOS）上滚动时，展开的内容会隐藏/折叠。我的第二个 sn-p 代码是问题的具体根源——似乎移动滚动被视为窗口大小调整。不 - e.type 没有在插件的其他任何地方定义。我试着只是删除那个条件，但没有改变。
抱歉，我在您提供的链接中没有看到任何手风琴。
如果您单击网格中的其中一个缩略图，您将看到内容在该行下方展开。也许手风琴是错误的术语。如果在移动设备上查看，可以看到展开的 div 在滚动时会自动折叠。

标签： javascript jquery ios accordion

【解决方案1】：

问题在于 iOS 滚动会触发 resize 事件。我在这里找到了解决方案：iphone/ipad triggering unexpected resize events

我将有问题的代码行包含在检查中，以查看屏幕的实际宽度是否发生了变化。这是我修改后的代码：

     // Store the window width
    var windowWidth = $(window).width();

    // adjust colio viewport height on window resize
    $(window).bind('resize orientationchange', function(e){

        // stop propagation if colio is event target
        if(e.target === self.markup.get(0)) {
            e.stopImmediatePropagation();
        }

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
    if ($(window).width() != windowWidth) {

        // Update the window width for next time
        windowWidth = $(window).width();

        // for 'inside' placement hide viewport immediately on resize
        if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {
            self.insideHideViewport();

        }

    }
        // disable page scroll during window resize
        if(!self.temp) {
            self.temp = [self.settings.syncScroll, self.settings.scrollPage];
        }
        self.settings.syncScroll = true;
        self.settings.scrollPage = false;

        // adjust viewport height
        clearTimeout(self.resize_timer);
        self.resize_timer = setTimeout(function(){
            self.expandViewport(self.active_id, true);
            self.settings.syncScroll = self.temp[0];
            self.settings.scrollPage = self.temp[1];
            delete self.temp;
        }, 200);

    });

【讨论】：