此问题仅在屏幕宽度小于990
使用基于Bootstrap
的startup framework
,我的导航栏中有一个下拉菜单。它在桌面版网站上运行得很好,但在移动版网站上,当点击下拉菜单时,它会显示链接,然后立即再次折叠。这使得无法从移动设备浏览网站。
导航栏的链接在这里
这是我的导航的html
<div class="collapse navbar-collapse pull-right">
<ul class="nav pull-left">
<?php
$pages = array(
"home" => "HOME",
"about" => "ABOUT"
);
$p = (isset($_GET['p'])) ? $_GET['p'] : "";
foreach ($pages as $url => $label) {
?>
<li><a <?= $p == $url ? 'class="active"' : ""?> href="index.php?p=<?=$url?>" > <?=$label?> </a></li>
<?php
}
?>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SERVICES<b class="caret"></b></a>
<span class="dropdown-arrow"></span>
<ul class="dropdown-menu">
<li><a href="engineering.php">ENGINEERING</a></li>
<li><a href="#">CERTIFICATION</a></li>
<li><a href="#">MANUFACTURING</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">CONTACT<b class="caret"></b></a>
<span class="dropdown-arrow"></span>
<ul class="dropdown-menu">
<li><a href="contact.php">CONTACT US</a></li>
<li><a href="employees.php">EMPLOYMENT</a></li>
<li><a href="empPortal.php">EMPLOYEE PORTAL</a></li>
<li><a href="cust.php">CUSTOMER PORTAL</a></li>
</ul>
</li>
</div>
</div>
</div>
</div>
我已经将下拉类移动到a
标记,并将下拉菜单封装在一个单独的div中,但没有任何帮助。我唯一能想到的另一件事就是摆弄JS
,但我不知道从哪里开始?
这是bootstrap的已知问题吗?或者我的代码中遗漏了什么?
window.isRetina = (function() {
var root = ( typeof exports == 'undefined' ? window : exports);
var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),(min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-resolution: 1.5dppx)";
if (root.devicePixelRatio > 1)
return true;
if (root.matchMedia && root.matchMedia(mediaQuery).matches)
return true;
return false;
})();
window.startupKit = window.startupKit || {};
startupKit.hideCollapseMenu = function() {
$('body > .navbar-collapse').css({
'z-index': 1
});
$('html').removeClass('nav-visible');
setTimeout(function() {
$('body > .navbar-collapse').addClass('collapse');
$('body > .colapsed-menu').removeClass('show-menu');
}, 400)
}
$(function () {
$('.page-wrapper, .navbar-fixed-top, .navbar-collapse a, .navbar-collapse button, .navbar-collapse input[type=submit]').on('click', function(e) {
if($('html').hasClass('nav-visible')) {
setTimeout(function(){
startupKit.hideCollapseMenu();
}, 200)
}
});
$(window).resize(function() {
if($(window).width() > 965) {
startupKit.hideCollapseMenu();
}
});
var menuCollapse = $('#header-dockbar > .colapsed-menu').clone(true);
$('body').append(menuCollapse);
$('#open-close-menu').on('click', function () {
if($('html').hasClass('nav-visible')) {
startupKit.hideCollapseMenu();
} else {
$('body > .colapsed-menu').addClass('show-menu');
if($('#header-dockbar').length) {
$('body > .colapsed-menu').css({
top: $('#header-dockbar').height()
});
}
setTimeout(function() {
$('html').addClass('nav-visible');
}, 1)
}
});
});
好的,在分析了你的代码后,有一些事情引起了我的注意
- 屏幕尺寸小于1000左右时,您的屏幕会发生变化,并产生空白
- 你使用的
body > .navbar-collapse .pull-right
是错误的,向右拉是导航塌陷不在其中 - 您正在使用page-transitions.js和未使用的swipebox.js
建议:
- 删除不需要的js,这样就不会产生不需要的冲突
- 选中。向右拉当调用它时,它是正在创建崩溃问题的类
编辑:你能告诉我这个折叠函数js在哪里吗?我找不到它,如果你知道我可以帮助更好的
编辑2:尝试用.navbar-collapse li:not(.dropdown)
更改.navbar-collapse
a
$(function () {
$('.page-wrapper, .navbar-fixed-top, .navbar-collapse li:not(.dropdown), .navbar-collapse button, .navbar-collapse input[type=submit]').on('click', function(e) {
if($('html').hasClass('nav-visible')) {
setTimeout(function(){
startupKit.hideCollapseMenu();
}, 200)
}
});