Javascript 引导导航栏下拉列表在移动设备中不工作
我遇到了一个问题,我的导航栏中的下拉菜单在桌面上工作,但在移动设备中无法扩展 以下是现场直播: 如果将页面缩小到手机大小,您将看到“LaunchSummer”下拉列表不会扩展 以下是导航栏的代码:Javascript 引导导航栏下拉列表在移动设备中不工作,javascript,html,css,menu,dropdown,Javascript,Html,Css,Menu,Dropdown,我遇到了一个问题,我的导航栏中的下拉菜单在桌面上工作,但在移动设备中无法扩展 以下是现场直播: 如果将页面缩小到手机大小,您将看到“LaunchSummer”下拉列表不会扩展 以下是导航栏的代码: <!-- Navigation --> <!-- Note: navbar-default and navbar-inverse are both supported with this theme. --> <nav class="navbar navbar-inver
<!-- Navigation -->
<!-- Note: navbar-default and navbar-inverse are both supported with this theme. -->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-expanded">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="[[~1]]">
<img src="assets/logo-nav@2x.png" class="img-responsive" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a href="[[~1]]">Home</a>
</li>
<li>
<a href="[[~3]]">About Us</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Launch Summer <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="[[~4]]"><font color="#080A21">Program Details</font></a></li>
<li><a href="[[~5]]"><font color="#080A21">FAQ</font></a></li>
<li><a href="[[~6]]"><font color="#080A21">Launch Alumni</font></a></li>
<li><a href="[[~2]]"><font color="#080A21">Past Companies</font></a></li>
<li role="separator" class="divider"></li>
<li><a href="https://launch.fluidreview.com/" target="_blank"><font color="#080A21">Apply!</font></a></li>
</ul>
</li>
<li>
<a href="https://www.edx.org/course/becoming-entrepreneur-mitx-launch-x" target="_blank">LaunchX</a>
</li>
<li>
<a href="http://www.mitlaunchclubs.com" target="_blank">Launch Clubs</a>
</li>
<li>
<a href="https://launchsummer.wordpress.com/" target="_blank">Blog</a>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
<!-- /.container -->
</nav>
切换导航
-
-
-
-
-
-
-
所以下拉菜单打开但同时关闭,因为内部链接有href=“#”删除下拉子元素a元素href属性所以下拉菜单打开但同时关闭,因为内部链接有href=“#”删除下拉子元素a元素href属性在vitality.js的第23到26行,您有以下功能:
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
因此,当我们单击任何项目时,菜单将关闭。您可以这样做,以防止在单击下拉菜单时关闭菜单
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li:not(.dropdown) a').click(function() {
$('.navbar-toggle:visible').click();
});
在vitality.js的第23到26行,您有以下功能:
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
因此,当我们单击任何项目时,菜单将关闭。您可以这样做,以防止在单击下拉菜单时关闭菜单
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li:not(.dropdown) a').click(function() {
$('.navbar-toggle:visible').click();
});
完美的非常感谢。现在,我只需更改文本颜色,以便在背景上看到它,我很乐意去做--如何在不更改桌面视图的文本颜色的情况下完成此操作?我看到您可以使用
FAQ
更改颜色。你不应该。最好使用CSS。您应该使用CSS执行类似的操作:@media(最小宽度:768px){.navbar collapse ul li.dropdown a{color:#080A21;}}
明白了。非常感谢。完美的非常感谢。现在,我只需更改文本颜色,以便在背景上看到它,我很乐意去做--如何在不更改桌面视图的文本颜色的情况下完成此操作?我看到您可以使用FAQ
更改颜色。你不应该。最好使用CSS。您应该使用CSS执行类似的操作:@media(最小宽度:768px){.navbar collapse ul li.dropdown a{color:#080A21;}}
明白了。非常感谢。