引导导航选项卡在移动设备上不可点击

Question

我对引导程序3.3.7导航选项卡的按钮有问题。 在台式设备上，这些按钮可以使用，但是在移动设备上，这些按钮不可单击。 请在下面找到代码。

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

可能很重要的另一个细节是，当通过Internet Explorer浏览器在移动设备上打开网站时，按钮可以正常工作。

Answer 1

这些正在为我开发移动设备。

在移动设备上打开它： https : //codepen.io/mikeabeln_nwea/pen/WKoERK?editors=1010

我所做的一项更改是在jQuery函数中，这可能在某些设备/移动浏览器上引起了问题：

$(document).ready(function(){
    $('.List li').on('click ', function() {
        $('.Div').slideDown('500');
    });
});

$('...').on('click')处理程序可管理桌面（鼠标）点击事件以及移动设备上的触摸（点击）事件，因此touchstart事件绑定不是必需的。

绑定touchstart可能会覆盖该行为并导致此问题，但是如果不确定是否在您使用的特定移动设备+浏览器上进行测试，则无法确定。

希望这会有所帮助...

引导导航选项卡在移动设备上不可点击

问题描述

1 个解决方案

解决方案1
0 2018-07-19 21:36:40

引导导航选项卡在移动设备上不可点击

问题描述

1 个解决方案

解决方案1 0 2018-07-19 21:36:40

解决方案1
0 2018-07-19 21:36:40