jQuery手風琴在移動滾動上合攏

Question

我正在使用此手風琴式插件來擴展和折疊網格每一行下的內容，例如google images。

一切在我的compter上都可以正常運行，但是當您在iOS設備上查看此內容時，滾動內容會折疊。 如果在iOS設備上進行檢查，則可以在上面的鏈接中看到問題。 （該問題可能也存在於Android中，但我無權訪問該設備。）

滾動問題是由以下調整大小功能引起的：

    // 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是必需的。 否則，由於高度計算已關閉，因此看起來很奇怪。

似乎正在將移動滾動視為窗口調整大小。

您是否能找到一種方法來修改此代碼，以保持調整大小隱藏功能，同時解決在移動設備上滾動時引起的問題？

Answer 1

問題是iOS滾動觸發了resize事件。 我在這里找到了解決方案： iphone / ipad觸發了意外的調整大小事件

我檢查了令人討厭的代碼行，以檢查屏幕的實際寬度是否已更改。 這是我的修改代碼：

     // 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);

    });