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

Posted 2023-03-24

【中文标题】Bootstrap 折叠按钮在智能手机上不起作用

【英文标题】：Bootstrap collapse button not working on smartphone

【发布时间】：2016-05-18 08:45:24

【问题描述】：

我正在尝试使用引导折叠类显示div。它运行顺利，但是当我尝试在 iPhone、iPad 或任何其他“智能设备”上使用该按钮时，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 脚本时，它似乎可以在手机上运行。不知道问题出在哪里。

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

【问题讨论】：

您提到的代码似乎在我的安卓手机上运行良好。您能否提供更多信息。

我发现另一个 .js 脚本中存在一个错误，导致无法点击。我将其添加到问题中。

在包含此 .js 时，您的浏览器检查工具是否出现任何控制台错误？它的 Ctrl + Shift + i 在 Chrome 上。

即使包含这个 js 代码，我也可以让它在我的 android 手机和 iPad 上完美运行。 Here is the codepen。你可以在这里复制你的错误吗

这个网站上的手机是否也可以使用：ic.martijnvanoeffel/wwdc-special ？

【参考方案1】：

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

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

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

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

希望对您有所帮助。

【讨论】：

谢谢！这帮助了我，当天的英雄！也喜欢解释，现在真的说清楚了！ :-)