Question

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

//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 个答案: