引导下拉列表未出现在 Firefox 中
Bootstrap Dropdown Not Appearing in Firefox
我有一个自定义样式的引导下拉菜单,但是,它没有出现在最新版本的Firefox中。它在Chrome,IE,Safari和Edge中完美运行。我认为这与我的结构有关,但我找不到罪魁祸首。
在单击链接的同时研究 DOM 更改时,似乎根本没有修改元素(没有类更改等)。
.HTML:
<header id="header">
<!--<div id="clockbox"></div>-->
<div class="navbar navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href=""><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="forums"><i class="fa fa-comment"></i> Forums</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">General
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="feedback/"><strong>Submit Feedback</strong></a></li>
<li role="separator" class="divider"></li>
<li><a href="messages/news">News</a></li>
<li><a href="messages/NOTAMs">NOTAMS</a></li>
<li role="separator" class="divider"></li>
<li><a href="schedule/master">Master Schedule</a></li>
<li><a href="info/staff/">Staff</a></li>
<li><a href="info/roster">Roster</a></li>
<li><a href="info/topten">Top 10</a></li>
<li role="separator" class="divider"></li>
<li><a href="info/currentflights">Current Flights</a></li>
<li><a href="info/movements">Monthly Movements</a></li>
<li><a href="info/heatmap">Heat Map</a></li>
<li role="separator" class="divider"></li>
<li><a href="info/maps">Maps</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pilots
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="events/pilot">Pilot Events</a></li>
<li><a href="info/prefroutes">Preferred Routes</a></li>
<li role="separator" class="divider"></li>
<li><a href="https://cert.vatsim.net/fp/file.php">File a Flight Plan <span style="color:gray" class="glyphicon glyphicon-share" aria-hidden="true"></span></a></li>
<li><a href="http://www.vatsim.net/pilot-resource-centre">VATSIM Pilot Resources <span style="color:gray" class="glyphicon glyphicon-share" aria-hidden="true"></span></a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Controller
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="signup/" data-toggle="tooltip" title="Click here if you have chosen ZSE as home ARTCC in VATUSA.">New Controller
Signup</a>
</li>
<li><a href="signup/visitor/">Become a Visitor</a></li>
<li class="nav-header"><a>profile</a></li>
<li><a href="profile/view">View Profile</a></li>
<li><a href="profile/edit">Edit Profile</a></li>
<li><a href="profile/changepassword">Change Password</a></li>
<li role="separator" class="divider"></li>
<li class="nav-header"><a>Training Schedule</a></li>
<li><a href="documents"><strong>Documents</strong></a></li>
<li><a href="schedule">My Schedule</a></li>
<li><a href="worksheets">My Worksheets </a></li>
<li role="separator" class="divider"></li>
<li class="nav-header"><a>Controlling Hours</a></li>
<li><a href="controller/monthview">My Month View</a></li>
<li><a href="controller/totalhours">My Total Hours</a></li>
<!--<li><a href="controller/endorsements">My Endorsements</a></li>-->
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Events
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="events/"><strong>Events Home</strong></a></li>
<li role="separator" class="divider"></li>
<li><a href="events/records">Event Records</a></li>
<!--<li>
<a href="events/requestevent" data-toggle="modal"
title="Click here if you have a new idea for an event">Request Event</a>
</li>-->
<li><a href="events/requestservice">Request ATC Coverage</a></li>
<li><a href="events/help">FAQ
<!--page: about events, how selected, how to sign up, and how to delete requests--></a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong>Admin
<span class="caret"></span></strong></a>
<ul class="dropdown-menu">
<li><a href="admin/"><strong>Admin Home</strong></a></li>
<li role="separator" class="divider"></li>
<li class="nav-header"><a>Mentor/Instructor</a></li>
<!-- <li><a href="training/scenarios">Training Scenarios</a></li> Future Feature-->
<li><a href="admin/trainingstatistics">INS/MTR Activity</a></li>
<li><a href="training/requests">Training Requests</a></li>
<li role="separator" class="divider"></li>
<li class="nav-header"><a>ATM/DATM</a></li>
<li><a href="admin/homepage">News/NOTAMs</a></li>
<li><a href="admin/signups">New Signup
Requests </a></li>
<li><a href="admin/loa">New LOA
Requests
<span class="badge" id="newreqs"></span></a></li>
<li role="separator" class="divider"></li>
<li class="nav-header"><a>Configuration</a></li>
<li><a href="admin/homepage">Homepage</a></li>
<li><a href="admin/airports">Edit Airports</a></li>
</ul>
</li>
</ul>
</div>
<div id="logo"></div>
</header>
.CSS:
li > a {
transition: all 0.4s ease;
}
.dropdown-menu {
border-radius: 0;
}
.dropdown-menu li a {
padding: 10px 25px;
font-size: 12px;
}
.open > .dropdown-menu {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.open > .dropdown-menu li a {
color: #000;
}
.dropdown-menu li a {
color: #fff;
}
.dropdown-menu {
/* -webkit-transform-origin: top;
transform-origin: top;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform: scale(1, 0);
display: block;
*/
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.dropup .dropdown-menu {
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
}
.navbar .nav > li > .dropdown-menu:after {
}
.dropup > .dropdown-menu:after {
border-bottom: 0;
border-top: 6px solid rgba(39, 45, 51, 0.9);
top: auto;
display: inline-block;
bottom: -6px;
content: '';
position: absolute;
left: 50%;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
该页面位于 zseartcc.org/new
我认为问题出在你的javascript上。
$(document).on('focusin', function (e) {
if ($(event.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
此代码集对事件的引用错误。那应该是e。进行该更改并检查一次。我认为它会起作用。
相关文章:
- 如何使用jQuery选择下拉列表的值
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 禁用jQuery中的下拉列表
- 如何在按钮中显示下拉列表中选定的元素
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 如何使用PHP和JS级联三个下拉列表
- 如何在使用剑道 MVVM 下拉列表时强制选择第一项
- 语义ui如何使用javascript启用或禁用下拉列表
- 无法使用PHP动态设置下拉列表中的值
- 如何根据对具有多行的先前列表的选择来动态加载下拉列表
- 下拉列表在使用z索引放置在前面后停止工作
- 从多维嵌套json数组创建下拉列表
- 引导下拉列表未出现在 Firefox 中
- 为什么从位置哈希中选择下拉列表在 Chrome 上有效,但不适用于 Firefox、IE 或 Safari
- firefox下拉列表行为
- 下拉列表中所选选项的描述适用于除Firefox之外的所有浏览器;如何修复
- 无法在Mozilla Firefox中使用javascript从下拉列表中删除项目