[英]Bootstrap nav-collapse links not working on mobile
我在下拉菜單無法正常工作一個星期的移動設備上遇到問題。 我從引導站點上獲取了當前示例的副本,對其進行了一些修改,並且在測試期間我發現它沒有按預期工作。 (原始示例也是如此( http://twitter.github.io/bootstrap/examples/carousel.html ),在該示例中,我僅添加了指向google的鏈接)-為什么這種行為?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Dropdown test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Links<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.google.com" target="blank">Google (opens in new window)</a></li>
<li><a href="http://www.bing.com" target="blank">Bing (opens in new window)</a></li>
<li><a class="linkcheck" href="http://www.google.com">Google</a></li>
<li><a class="linkcheck" href="http://www.bing.com">Bing</a></li>
</ul>
</li><!-- .dropdown -->
</ul><!-- .nav -->
</div><!-- .nav-collapse -->
</div><!-- .container -->
</div><!-- .navbar-inner -->
</div><!-- .navbar -->
Bootstrap對我來說是新手,而我在nav-collapse上找不到任何文檔,在哪里可以找到? 我真的必須要做一個點擊事件,然后是window.open(url)嗎? (或者onclick在移動設備上的行為是否有所不同?)
這是我的在線示例: http : //test-web.dk/sandbox/bootstrap/
編輯:找到一個解決方案:
$('.linkcheck', this).click(function(){
var url = $(this).attr('href');
alert("link clicked:" + url);
if(url.match(/^http:/)) {
window.location.href = url;
}
});
// fix by RobDodson: github.com/twitter/bootstrap/issues/4550
// Kills regular links in browsers though, but they will be redirected by linkcheck above
$('.dropdown a').click(function(e) {
e.preventDefault();
setTimeout($.proxy(function() {
if ('ontouchstart' in document.documentElement) {
$(this).siblings('.dropdown-backdrop').off().remove();
}
}, this), 0);
});
不過,真正的引導程序解決方案將是廣為人知的,而不是黑客:-)所以,如果有人有建議,請發布。
檢查您使用的是最新的jQuery。
我在Drupal的Bootstrap主題上遇到了同樣的問題,但是通過將jQuery Update中的設置更改為最新來解決了這個問題!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.