移動設備上的引導下拉菜單問題
[英]Bootstrap Dropdown menu issue on mobile
問題描述
我需要一些關於在移動設備上顯示菜單的幫助。 在移動版本上單擊 STORE 菜單時，它不會展開而是關閉常規菜單。 這是 web 頁面的鏈接。 任何幫助將不勝感激。
<body>看起來像
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar">
菜單 HTML
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse header-transparent">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand page-scroll logo no-margin" href="#page-top"><img src="images/logo-uk.png"></a>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="page-scroll nav-link" href="#page-top">HOME </a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#frames"></a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="ppgtrikes.php"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORE
</a>
<div class="dropdown-menu">
<a class="page-scroll nav-link" href="#engines">
<font color="#000000"></font>
</a>
<a class="page-scroll nav-link" href="#harnesses">
<font color="#000000"></font>
</a>
</div>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#contact"></a>
</li>
</ul>
</div>
</div>
<!-- End of Container -->
</nav>
1 個解決方案
解決方案1
0 已采納 2020-07-04 20:29:45
你有 2 個 Bootstrap nav ，一個在另一個里面。
更新
在此文件http://www.evoaviation.co.uk/js/custom.js中，您在開頭有部分代碼
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
$('.navbar-collapse a').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
將其替換為以下內容
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
// checking if there is no 'data-toggle' in <a>
$('.navbar-collapse a:not([data-toggle])').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
下拉引導程序在移動設備中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.