Bootstrap 折叠按钮在智能手机上不起作用

Question

我正在尝试使用 bootstrap 折叠 class 来显示 div。它工作顺利，但是当我尝试使用 iPhone、iPad 或任何其他 'smart device' 上的按钮时，div 不显示。

这是我的代码：

<button type="button" class="btn btn-primary facts-button" data-toggle="collapse" data-target="#watch-facts">    Lees meer </button>

<div id="watch-facts" class="collapse out extras-facts">
    <ul>
        <li>One.</li>
        <li>Two and two again</li>
        <li>3</li>
    </ul> 
</div>

当我禁用此 .js 脚本时，它似乎可以在移动设备上运行 phone。不知道问题出在哪里。

!function($){

$.support.transition = (function(){
var thisBody = document.body || document.documentElement, 
thisStyle = thisBody.style,
support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
return support;
})();

var defaults = {
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false,
keyboard: true,
beforeMove: null,
afterMove: null,
loop: false
};

$.fn.swipeEvents = function() {
return this.each(function() {

    var startX,
        startY,
        $this = $(this);

    $this.bind('touchstart', touchstart);

    function touchstart(event) {
      var touches = event.originalEvent.touches;
      if (touches && touches.length) {
        startX = touches[0].pageX;
        startY = touches[0].pageY;
        $this.bind('touchmove', touchmove);
      }
      event.preventDefault();
    }

    function touchmove(event) {
      var touches = event.originalEvent.touches;
      if (touches && touches.length) {
        var deltaX = startX - touches[0].pageX;
        var deltaY = startY - touches[0].pageY;

        if (deltaX >= 50) {
          $this.trigger("swipeLeft");
        }
        if (deltaX <= -50) {
          $this.trigger("swipeRight");
        }
        if (deltaY >= 50) {
          $this.trigger("swipeUp");
        }
        if (deltaY <= -50) {
          $this.trigger("swipeDown");
        }
        if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
          $this.unbind('touchmove', touchmove);
        }
      }
      event.preventDefault();
    }

  });
};
$.fn.onepage_scroll = function(options){
var settings = $.extend({}, defaults, options),
el = $(this),
sections = $(settings.sectionContainer)
total = sections.length,
status = "off",
topPos = 0,
lastAnimation = 0,
quietPeriod = 500,
paginationList = "";

$.fn.transformPage = function(settings, pos, index) {
 if ( ! $.support.transition ) {
    $(this).animate({
     'top': pos + '%'
    },400);
    return;
 }  
  $(this).css({
    "-webkit-transform": "translate3d(0, " + pos + "%, 0)",
    "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing,
    "-moz-transform": "translate3d(0, " + pos + "%, 0)",
    "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing,
    "-ms-transform": "translate3d(0, " + pos + "%, 0)",
    "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing,
    "transform": "translate3d(0, " + pos + "%, 0)",
    "transition": "all " + settings.animationTime + "ms " + settings.easing
  });
  $(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    if (typeof settings.afterMove == 'function') settings.afterMove(index);
  });
}

$.fn.jumpTo = function(newIndex) {
  var el = $(this)
  index = $(settings.sectionContainer +".active").data("index");
  current = $(settings.sectionContainer + "[data-index='" + index + "']");
  next = $(settings.sectionContainer + "[data-index='" + (newIndex+1) + "']");
  if(next.length < 1) {
    if (settings.loop == true) {
      pos = 0;
      next = $(settings.sectionContainer + "[data-index='" + (newIndex) + "']");
    } else {
      return
    }

  }else {
    pos = (newIndex * 100) * -1;
  }

  current.removeClass("active")
  next.addClass("active");
  if(settings.pagination == true) {
    $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
    $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
  }

  $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
  $("body").addClass("viewing-page-"+next.data("index"))

  if (history.replaceState && settings.updateURL == true) {
    var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
    history.pushState( {}, document.title, href );
  }
  el.transformPage(settings, pos, newIndex);
}




$.fn.moveDown = function() {
  var el = $(this)
  index = $(settings.sectionContainer +".active").data("index");
  current = $(settings.sectionContainer + "[data-index='" + index + "']");
  next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']");
  if(next.length < 1) {
    if (settings.loop == true) {
      pos = 0;
      next = $(settings.sectionContainer + "[data-index='1']");
    } else {
      return
    }

  }else {
    pos = (index * 100) * -1;
  }
  if (typeof settings.beforeMove == 'function') settings.beforeMove( current.data("index"));
  current.removeClass("active")
  next.addClass("active");
  if(settings.pagination == true) {
    $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
    $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
  }

  $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
  $("body").addClass("viewing-page-"+next.data("index"))

  if (history.replaceState && settings.updateURL == true) {
    var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
    history.pushState( {}, document.title, href );
  }
  el.transformPage(settings, pos, index);
}

$.fn.moveUp = function() {
  var el = $(this)
  index = $(settings.sectionContainer +".active").data("index");
  current = $(settings.sectionContainer + "[data-index='" + index + "']");
  next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']");

  if(next.length < 1) {
    if (settings.loop == true) {
      pos = ((total - 1) * 100) * -1;
      next = $(settings.sectionContainer + "[data-index='"+total+"']");
    }
    else {
      return
    }
  }else {
    pos = ((next.data("index") - 1) * 100) * -1;
  }
  if (typeof settings.beforeMove == 'function') settings.beforeMove(current.data("index"));
  current.removeClass("active")
  next.addClass("active")
  if(settings.pagination == true) {
    $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
    $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
  }
  $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
  $("body").addClass("viewing-page-"+next.data("index"))

  if (history.replaceState && settings.updateURL == true) {
    var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1);
    history.pushState( {}, document.title, href );
  }
  el.transformPage(settings, pos, index);
}

function init_scroll(event, delta) {
    deltaOfInterest = delta;
    var timeNow = new Date().getTime();
    // Cancel scroll if currently animating or within quiet period
    if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
        event.preventDefault();
        return;
    }

    if (deltaOfInterest < 0) {
      el.moveDown()
    } else {
      el.moveUp()
    }
    lastAnimation = timeNow;
}

// Prepare everything before binding wheel scroll

el.addClass("onepage-wrapper").css("position","relative");
$.each( sections, function(i) {
  $(this).css({
    position: "absolute",
    top: topPos + "%"
  }).addClass("section").attr("data-index", i+1);
  topPos = topPos + 100;
  if(settings.pagination == true) {
    paginationList += "<li><a data-index='"+(i+1)+"' href='#" + (i+1) + "'></a></li>"
  }
});

el.swipeEvents().bind("swipeDown", function(){
  el.moveUp();
}).bind("swipeUp", function(){
  el.moveDown();
});

// Create Pagination and Display Them
if(settings.pagination == true) {
  $("<ul class='nav navbar-nav navbar-right onepage-pagination'>" + paginationList + "</ul>").prependTo(".navbar-collapse");
  posTop = (el.find(".onepage-pagination").height() / 2) * -1;
  el.find(".onepage-pagination").css("margin-top", posTop);
}

if(window.location.hash != "" && window.location.hash != "#1") {
  init_index = window.location.hash.replace("#", "")
  $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active")
  $("body").addClass("viewing-page-"+ init_index)
  if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active");

  next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']");
  if(next) {
    next.addClass("active")
    if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active");
    $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
    $("body").addClass("viewing-page-"+next.data("index"))
    if (history.replaceState && settings.updateURL == true) {
      var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index);
      history.pushState( {}, document.title, href );
    }
  }
  pos = ((init_index - 1) * 100) * -1;
  el.transformPage(settings, pos, init_index);

}else{
  $(settings.sectionContainer + "[data-index='1']").addClass("active")
  $("body").addClass("viewing-page-1")
  if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active");
}
if(settings.pagination == true) {
  $(".onepage-pagination li a").click(function (){
    var page_index = $(this).data("index");
    if (!$(this).hasClass("active")) {
      current = $(settings.sectionContainer + ".active")
      next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']");
      if(next) {
        current.removeClass("active")
        next.addClass("active")
        $(".onepage-pagination li a" + ".active").removeClass("active");
        $(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");
        $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
        $("body").addClass("viewing-page-"+next.data("index"))
      }
      pos = ((page_index - 1) * 100) * -1;
      el.transformPage(settings, pos, page_index);
    }
    if (settings.updateURL == false) return false;
  });
}



$(document).bind('mousewheel DOMMouseScroll', function(event) {
  event.preventDefault();
  var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
  init_scroll(event, delta);
});

if(settings.keyboard == true) {
  $(document).keydown(function(e) {
    var tag = e.target.tagName.toLowerCase();
    switch(e.which) {
      case 38:
        if (tag != 'input' && tag != 'textarea') el.moveUp()
      break;
      case 40:
        if (tag != 'input' && tag != 'textarea') el.moveDown()
      break;
      default: return;
    }
    e.preventDefault();
  });
}
return false;
}

}(window.jQuery);

Answer 1

啊终于。现在我有了你的完整代码。我能找到问题所在。 :-)

我在我的机器上本地获取了您所有的网站资源和资产并进行了测试，错误似乎是由于这个 - event.preventDefault(); 在你提到的 .js 文件上 (onepage-scroll.js)在 line number 54.

解释： event.preventDefault方法是用来防止（不是触发）事件内调用的默认动作。因此，您的触摸事件在任何平板电脑或更小设备上的默认操作将被阻止，因此在本机设备上不起作用。

答案： 从 touchstart 函数（第 54 行）中删除 event.preventDefault();，即使在您的本机设备上它也应该可以正常工作。经过测试，它工作正常。

希望对您有所帮助。

Bootstrap 折叠按钮在智能手机上不起作用

Bootstrap collapse button not working on smartphone

android

html

ios

twitter-bootstrap

collapse