引导导航选项卡在移动设备上不可点击
[英]Bootstrap nav-tabs not clickable on mobile devices
问题描述
I have a problem with the bootstrap 3.3.7 nav-tabs' button. 
我对引导程序3.3.7导航选项卡的按钮有问题。 On desktop devices the buttons are working, but on mobile devices they are not clickable. 在台式设备上，这些按钮可以使用，但是在移动设备上，这些按钮不可单击。 Below please find the code. 请在下面找到代码。
//nav tabs to have buttons work on mobile devices $(document).ready(function(){ $('.List li').on('touchstart click ', function() { $('.Div').slideDown('500'); }); });
<!DOCTYPE html> <html lang="en"> <head> <title>Agricultural Directorate</title> <!-- Latest compiled and minified CSS --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/main.css"> </head> <body> <div style="padding:25px;"> <ul class="nav nav-tabs" role="tablist" id="myTabs"> <li style="cursor:pointer !important;" role="presentation" class="active settingshead"> <a data-toggle="tab" href="#first">Testing</a> </li> <li style="cursor:pointer;" role="presentation" class="settingshead"> <a data-toggle="tab" href="#second">Implementation</a> </li> <li style="cursor:pointer;" role="presentation" class="settingshead"> <a data-toggle="tab" href="#third">Requirements</a> </li> <li style="cursor:pointer;" role="presentation" class="settingshead"> <a data-toggle="tab" href="#fourth">Maintainance</a> </li> </ul> </div> <div style="padding-left:40px;padding-right:40px;" class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="first"> <div class="namedesig"> <h4>Dr. Jane Doe</h4> <p>tester</p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="second"> <div class="namedesig"> <h4>Dr. Martin</h4> <p>Implementer</p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="third"> <div class="namedesig"> <h4>Dr. John</h4> <p>Requirements</p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="fourth"> <div class="namedesig"> <h4>Dr. Watson</h4> <p>Maint....</p> </div> </div> </div> </div> </body>
Another detail, which maybe is important, is that the buttons are working when the website is opened on a mobile device through an Internet Explorer browser. 可能很重要的另一个细节是，当通过Internet Explorer浏览器在移动设备上打开网站时，按钮可以正常工作。
1 个解决方案
解决方案1
0 2018-07-19 21:36:40
These are working on mobile for me. 这些正在为我开发移动设备。
Open this on a mobile device: https://codepen.io/mikeabeln_nwea/pen/WKoERK?editors=1010 在移动设备上打开它： https : //codepen.io/mikeabeln_nwea/pen/WKoERK?editors=1010
The one change that I made is in the jQuery function, which may be causing the problem on some devices / mobile browsers: 我所做的一项更改是在jQuery函数中，这可能在某些设备/移动浏览器上引起了问题：
$(document).ready(function(){
$('.List li').on('click ', function() {
$('.Div').slideDown('500');
});
});
The $('...').on('click') handler manages desktop (mouse) click events as well as touch (tap) events on mobile devices, so the touchstart event binding is not necessary. $('...').on('click')处理程序可管理桌面（鼠标）点击事件以及移动设备上的触摸（点击）事件，因此touchstart事件绑定不是必需的。
Binding touchstart might override that behavior and cause this problem, but without testing on the specific mobile device + browser that you're using I can't be sure. 绑定touchstart可能会覆盖该行为并导致此问题，但是如果不确定是否在您使用的特定移动设备+浏览器上进行测试，则无法确定。
Hope this is helpful... 希望这会有所帮助...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.