bootstrap 3 手风琴折叠在 iPhone 上不起作用

问题描述 投票：0回答：9

这些“手风琴子菜单”适用于 Chrome 和 Firefox，但不适用于 iPhone。

我建立了一个网站，其中在较小的屏幕上包含“offcanvas”导航菜单。用户单击“热狗按钮”，导航菜单从左侧滑到屏幕上......到目前为止效果很好。

一些导航元素包含子菜单。对于这些，我使用了 bootstrap 的手风琴标记。用户单击箭头，“子菜单”展开。

enter image description here

问题

我在linux上使用chrome进行开发。这种机制在 chrome、firefox 和我能接触到的所有浏览器以及我个人的 Android 手机上都能完美运行。它也适用于 responsinator.com。然而，由于我没有 Safari，也没有 iPhone，所以我无法直接在 iPhone 上测试此功能。我正在努力获得 iPhone 模拟器... 在那之前，其他一些人在 iPhone 上看过这个，我被告知“子菜单”根本不起作用。当用户单击箭头时，没有任何反应...

这是包含“子菜单”的“菜单项”的摘录：请注意我正在使用“数据切换”和“数据目标”属性：

<div class="panel panel-default"> <!-- The "Trigger" --> <div class="panel-heading"> <h4 class="panel-title"> <a href="view.php?cms_nav_id=1" name="about"> About</a> <a data-toggle="collapse" data-target="#collapse1"> <i class="pull-right icon-chevron-right mobile-nav-icon"></i> </a> </h4> </div> <!-- Populated submenus: --> <div id="collapse1" class="panel-collapse collapse"> <div class="panel-body"> <a href="view.php?cms_nav_id=7" name="ohioimprovementprocess">Ohio Improvement Process</a> </div> <div class="panel-body"> <a href="view.php?cms_nav_id=8" name="org/orgbeliefs">Organization Beliefs</a> </div> </div> </div><!-- /.panel --> 

我真的不知道接下来要尝试什么：类似的问题以“css冲突”或有关
.click()

的iphone问题结束，但我没有使用它：我正在使用

data-toggle/data-target
。我正在考虑放弃“数据目标”标记，转而手动调用 
on('click', ... )
事件，但我宁愿不...
顺便说一句，如果相关的话，我会在页面底部调用它：

<script src="/assets/dist/js/bootstrap.min.js"></script> 

这是“bootstrap.js v3.0.0”。

还有其他线索吗？最近有类似问题的直接经验吗？

预先感谢您的帮助。

javascript jquery ios css twitter-bootstrap
9个回答
80
投票
<a>

上。所以这有效：
<a data-toggle="collapse" data-target="#collapse1" href="#collapse1"> <i class="pull-right icon-chevron-right mobile-nav-icon"></i> </a> 

但这并不：

<a data-toggle="collapse" data-target="#collapse1"> <i class="pull-right icon-chevron-right mobile-nav-icon"></i> </a> 




      

      
      
      

      

        

          

            

              
29
投票

              
            

          

        

        



[data-toggle~="collapse"] {
    cursor: pointer;
}


    



      

      
      
      

      

        

          

            

              
7
投票

              
            

          

        

        



<button data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</button>




希望这有帮助。 

    





      

      
      
      

      

        

          

            

              
6
投票

              
            

          

        

        



cursor: pointer;


    



      

      
      
      

      

        

          

            

              
5
投票

              
            

          

        

        



$('.divClassName').on('click touchstart', function () {
     $($(this).data('target')).collapse('toggle');
});


    



      

      
      
      

      

        

          

            

              
3
投票

              
            

          

        

        
div
，您可以使用以下 jQuery 方法（已在 ios 8 上测试）：


<div class="collapse-header" data-target="#collapse_0">
    Click this element...
</div>
<div id="collapse_0">
    ...to collapse this element.
</div>

<script>
    $('.collapse-header').on('click', function () {
        $($(this).data('target')).collapse('toggle');
    });
</script>


    



      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        



我在我的应用程序中这样做了：



a[data-toggle="collapse"]{
  cursor:pointer;
}




它解决了问题。



MDN 文档中这样说：



“Safari Mobile 7.0+（也可能是早期版本）存在一个错误，即通常不具有交互性（例如）的元素上不会触发单击事件，并且这些元素也没有直接附加到元素本身的事件侦听器（即正在使用事件委托）。请参阅此实时示例以进行演示。另请参阅 Safari 的有关使元素可点击的文档以及“可点击元素”的定义”



参考文献：





  • https://github.com/twbs/bootstrap/issues/16213
    

  • https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
    

    
    
    • 




      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        



[isAnimated]="false"


    

我使用的

      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css并且iPhone的这个问题仍然存在。对于直到今天才经历过这种情况的程序员来说。这是我找到的解决方案。
$(document).ready(function() {
  // Toggle the accordion
  $('.accordion-button').on('click', function() {
    var accordionContent = $(this).closest('.accordion-item').find('.accordion-collapse');
    accordionContent.slideToggle(200);
  });
});



我几乎放弃使用 bootstrap 手风琴，想使用普通的手风琴和 jquery。当奇迹发生时:) 上面的 jquery 适用于我的 bootstrap 手风琴。希望这篇文章可以帮助到你！

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.