Bootstrap下拉菜单进行故障排除
我正在这里建立一个网站：
下拉导航栏菜单工作正常，只是当导航栏右侧的项目上有鼠标悬停时，第一个下拉菜单会激活。 （即点击“管理”，其下拉菜单和“我们是谁”下的下拉菜单也会下降！）
还有什么进一步的建议吗？
代码如下：
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container dropdown">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header dropdown">
- ＆GT; 切换导航
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown" id="bs-example-navbar-collapse-1" data-hover="dropdown">
<ul class="nav navbar-nav navbar-right dropdown">
<li>
<a href="index.php">_Home</a>
</li>
<li class="dropdown">
<a href="who_are_we.php" class="dropdown-toggle" data-toggle="dropdown">_Who are we?<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="who_are_we.php#abouttheassociation">_About the Association</a>
</li>
<li class="">
<a href="who_are_we.php#objectives">_Objectives</a>
</li>
<li class="dt_bg">
<a href="who_are_we.php#quemsomos">_Quem Somos?</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="how_do_we_help.php" class="dropdown-toggle" data-toggle="dropdown">_How do we help?<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="how_do_we_help.php#snips">_Snips</a>
</li>
<li>
<a href="udder.php">_Other</a>
</li>
<li class="dt_bg">
<a href="forms.php">_Forms</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="how_can_you_help.php" class="dropdown-toggle" data-toggle="dropdown">_How can <strong>You</strong> help?<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="how_can_you_help.php#ourshops" class="trigger right-caret">_Our Shops</a>
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
<a href="how_can_you_help.php#alvor">_Alvor</a>
</li>
<li>
<a href="how_can_you_help.php#albufeira">_Albufeira</a>
</li>
<li class="dt_bg">
<a href="how_can_you_help.php#silves">_Silves</a>
</li>
</ul>
</li>
<li>
<a href="how_can_you_help.php#fundraising">_Fundraising</a>
</li>
<li class="dt_bg">
<a href="how_can_you_help.php#membership">_Membership</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="latest_news.php" class="dropdown-toggle" data-toggle="dropdown">_Latest News<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="latest_news.php#events">_Upcoming Events</a>
</li>
<li>
<a href="latest_news.php#other">_Other</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="structure.php" class="dropdown-toggle" data-toggle="dropdown">_Administration<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="structure.php#thestructure" class="trigger right-caret">_Structure of the association</a>
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
<a href="structure.php#managementboard">_Management Board</a>
</li>
<li>
<a href="structure.php#fiscalcouncil">_Fiscal Council</a>
</li>
<li class="dt_bg">
<a href="structure.php#membership">_Annual General Assembly</a>
</li>
</ul>
</li>
<li>
<a href="structure.php#annualreports">_Reports & Accounts</a>
</li>
</ul>
</li>
<li>
<a href="apaa_vet_links.php">_Vet Clinics</a>
</li>
<li>
<a href="contact.php">_Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
任何有关问题所在的帮助都会感激不尽，因为我的眼睛在经过数小时的努力后才会发现问题。
非常感谢
更新
我已经应用了@Spade提出的解决方案，但情况仍然存在。
在任何下拉菜单项上使用[link] http://apaaportugal.doidosou.eu/useful_links.php作为测试页面（无轮播）onmouseover也会激活项目“_who are we”下的第一个下拉列表。
页面上的Javascript代码是：
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Sub-Menu JavaScript -->
<script src="js/sub_menu.js"></script>
<!-- header script -->
<script>
var headerHeight = 200;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > headerHeight) {
$('#myNav').removeClass('navbar-top');
$('#myNav').addClass('navbar-fixed-top');
} else {
$('#myNav').removeClass('navbar-fixed-top');
$('#myNav').addClass('navbar-top');
}
});
</script>
<!-- Bootstrap Dropdown Hover JS -->
<script src="js/bootstrap-dropdownhover.min.js"></script>
<script>
$(function() {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$(window).resize(function() {
var width = $(this).width();
if (width < 769) {
$('.navbar .dropdown').removeClass('test');
} else {
$('.navbar .dropdown').addClass('test');
}
});
});
</script>
Navbar Html代码如下：
<!-- Header Content -->
<div class="container">
<div class="row">
<div class="col-lg-1">
<a href="index.php" class="pull-left"><img src="/images/APPA_logo_R_80.png"></a><a class="navbar-brand" href="#"></a>
</div>
<div class="col-lg-11">
<div>
<h1 class="h_header">APAA - Association for the Protection of Animals in the Algarve</h1>
<h3 class="h_header">Associação de Protecção Animal do Algarve</h3>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Navigation -->
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container dropdown">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header dropdown">
<!-- <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">-->
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown" id="bs-example-navbar-collapse-1" data-hover="dropdown">
<ul class="nav navbar-nav navbar-right dropdown">
<li>
<a href="index.php">_Home</a>
</li>
<li class="dropdown">
<a href="who_are_we.php" data-toggle="dropdown" class="dropdown-toggle disabled">_Who are we?<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="who_are_we.php#abouttheassociation">_About the Association</a>
</li>
<li class="">
<a href="who_are_we.php#objectives">_Objectives</a>
</li>
<li class="dt_bg">
<a href="who_are_we.php#quemsomos">_Quem Somos?</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="how_do_we_help.php" data-toggle="dropdown" class="dropdown-toggle disabled">_How do we help?<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="how_do_we_help.php#snips">_Snips</a>
</li>
<li>
<a href="how_do_we_help.php#other">_Other</a>
</li>
<li class="dt_bg">
<a href="how_do_we_help.php#forms">_Forms</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="how_can_you_help.php" data-toggle="dropdown" class="dropdown-toggle disabled">_How can <strong>You</strong> help?<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="how_can_you_help.php#ourshops" class="trigger right-caret">_Our Shops</a>
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
<a href="how_can_you_help.php#alvor">_Alvor</a>
</li>
<li>
<a href="how_can_you_help.php#albufeira">_Albufeira</a>
</li>
<li class="dt_bg">
<a href="how_can_you_help.php#silves">_Silves</a>
</li>
</ul>
</li>
<li>
<a href="how_can_you_help.php#fundraising">_Fundraising</a>
</li>
<li class="dt_bg">
<a href="how_can_you_help.php#membership">_Membership</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="latest_news.php" data-toggle="dropdown" class="dropdown-toggle disabled">_Latest News<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="latest_news.php#events">_Upcoming Events</a>
</li>
<li>
<a href="latest_news.php#other">_Other</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="structure.php" data-toggle="dropdown" class="dropdown-toggle disabled">_Administration<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="structure.php#thestructure" class="trigger right-caret">_Structure of the association</a>
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
<a href="structure.php#managementboard">_Management Board</a>
</li>
<li>
<a href="structure.php#fiscalcouncil">_Fiscal Council</a>
</li>
<li class="dt_bg">
<a href="structure.php#membership">_Annual General Assembly</a>
</li>
</ul>
</li>
<li>
<a href="structure.php#annualreports">_Reports & Accounts</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="useful_links.php" data-toggle="dropdown" class="dropdown-toggle disabled">_Useful Links<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="apaa_vet_links.php">_Algarve - Veterinary Surgeries</a>
</li>
<li>
<a href="other_agencies.php">_Algarve - Other animal-related institutions</a>
</li>
</ul>
</li>
<li>
<a href="contact.php">_Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
1 个答案:
答案 0 :(得分：2)
需要改变两件事：
1）用以下内容替换“脚本以激活轮播”：
$(function() {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$(window).resize(function() {
var width = $(this).width();
if (width < 769) {
$('.navbar .dropdown').removeClass('test');
} else {
$('.navbar .dropdown').addClass('test');
}
});
});
2）使用以下内容替换您为Navigation共享的代码：
<!-- Navigation -->
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1" data-toggle="dropdown">
<ul class="nav navbar-nav">
<li>
<a href="index.php">_Home</a>
</li>
<li class="dropdown">
<a href="who_are_we.php" class="dropdown-toggle" data-toggle="dropdown">_Who are we?<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="who_are_we.php#abouttheassociation">_About the Association</a>
</li>
<li class="">
<a href="who_are_we.php#objectives">_Objectives</a>
</li>
<li class="dt_bg">
<a href="who_are_we.php#quemsomos">_Quem Somos?</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="how_do_we_help.php" class="dropdown-toggle" data-toggle="dropdown">_How do we help?<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="how_do_we_help.php#snips">_Snips</a>
</li>
<li>
<a href="udder.php">_Other</a>
</li>
<li class="dt_bg">
<a href="forms.php">_Forms</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="how_can_you_help.php" class="dropdown-toggle" data-toggle="dropdown">_How can <strong>You</strong> help?<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="how_can_you_help.php#ourshops" class="trigger right-caret">_Our Shops</a>
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
<a href="how_can_you_help.php#alvor">_Alvor</a>
</li>
<li>
<a href="how_can_you_help.php#albufeira">_Albufeira</a>
</li>
<li class="dt_bg">
<a href="how_can_you_help.php#silves">_Silves</a>
</li>
</ul>
</li>
<li>
<a href="how_can_you_help.php#fundraising">_Fundraising</a>
</li>
<li class="dt_bg">
<a href="how_can_you_help.php#membership">_Membership</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="latest_news.php" class="dropdown-toggle" data-toggle="dropdown">_Latest News<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="latest_news.php#events">_Upcoming Events</a>
</li>
<li>
<a href="latest_news.php#other">_Other</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="structure.php" class="dropdown-toggle" data-toggle="dropdown">_Administration<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="structure.php#thestructure" class="trigger right-caret">_Structure of the association</a>
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
<a href="structure.php#managementboard">_Management Board</a>
</li>
<li>
<a href="structure.php#fiscalcouncil">_Fiscal Council</a>
</li>
<li class="dt_bg">
<a href="structure.php#membership">_Annual General Assembly</a>
</li>
</ul>
</li>
<li>
<a href="structure.php#annualreports">_Reports & Accounts</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="useful_links.php" class="dropdown-toggle" data-toggle="dropdown">_Useful Links<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
<a href="apaa_vet_links.php">_Algarve - Veterinary Surgeries</a>
</li>
<li>
<a href="other_agencies.php">_Algarve - Other animal-related institutions</a>
</li>
</ul>
</li>
<li>
<a href="contact.php">_Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
同时将结果附在我身边：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？