javascript - onclick 事件未触发且下拉代码不起作用
问题描述
请参阅https://jsfiddle.net/Spleendrivel/x718xd87/上的代码
我还发现，当我用压缩版本替换未压缩的库链接时，导航栏菜单根本不再可见。
想让这个工作，所以下拉菜单项实际上列出了每个项目下的项目，并且 onclick 事件按预期运行。
最后一个问题，我曾经让一切都正常工作，然后发现它不再在我的手机上工作，所以我开始调试，结果却得到一个不起作用的菜单！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="Width=device-Width, initial-scale=1">
<title>Arizona - Yavapai Area of NA</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: url(images/SandyBackground.jpg) repeat
}
@media screen and (max-width: 2400px) {
body {
font-size: 2vw;
color: black;
}
}
@media screen and (max-width: 900px) {
body {
font-size: 1.8vw;
color: black;
}
}
.hidden {
display:none;
}
svg text {
font-family: FontAwesome;
}
.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
td {
padding:0 5px 0 5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img src="images/HeaderImage.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<H4><Strong>Need Help?</Strong> 928-458-7488</H4>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="CloseAll();">Meetings</a>
<ul class="dropdown-menu">
<li class="menu-item "><a href="#" onclick="toggleAllMeetings();" class="dropdown-item">All Meetings w/Legend</a></li>
<li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleMonMeetings();">Monday</a></li>
<li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleTueMeetings();">Tuesday</a></li>
<li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleWedMeetings();">Wednesday</a></li>
<li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleThuMeetings();">Thursday</a></li>
<li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleFriMeetings();">Friday</a></li>
<li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleSatMeetings();">Saturday</a></li>
<li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleSunMeetings();">Sunday</a></li>
<li class="menu-item ">
<div class="dropdown-divider"> </div>
</li>
<li class="menu-item "><a class="dropdown-item" target="_blank" onclick="CloseAll();" href="Files/2018-04-17-Spring-Meeting-List.pdf">Print List</a></li>
<li class="menu-item ">
<div class="dropdown-divider"> </div>
</li>
<li class="menu-item "><a class="dropdown-item" onclick="toggleCommitteeMeetings();" href="#">Committee Meetings</a></li>
</ul>
</li>
<li class="menu-item "><a href="#" onclick="toggleLocalEvents();" class="nav_link">EVENTS</a></li>
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="CloseAll();">Documents</a>
<ul class="dropdown-menu">
<li class="menu-item "><a target="_blank" href="Files/2017-11-06_YASC_Group_Order_Form.pdf" class="dropdown-item">Group Order Form</a></li>
<li class="menu-item "><a target="_blank" href="Files/Treasurer-Group-Report-Form.pdf" class="dropdown-item">Group Treasurer's Form</a></li>
<li class="menu-item "><a target="_blank" href="Files/Yavapai_Area_Service_Guidelines_Revised_December_2016.pdf" class="dropdown-item">Yavapai Area Service Guidelines</a></li>
</ul>
</li>
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="CloseAll();">Other Links</a>
<ul class="dropdown-menu">
<li class="menu-item "><A target="_blank" href="http://www.arizona-na.org/" class="dropdown-item">Arizona Region</a></li>
<li class="menu-item "><A target="_blank" href="http://www.vvana.info/" class="dropdown-item">Verde Valley Area</a></li>
<li class="menu-item "><A target="_blank" href="http://na.org/" class="dropdown-item">World Services</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Latest compiled and minified JQuery code -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified BootStrap Code -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script>
function toggleAllMeetings() {
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
else
AllMeetingsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleMonMeetings() {
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
else
MonMeetingsContent.style.display = 'block';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleTueMeetings() {
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
else
TueMeetingsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleWedMeetings() {
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
else
WedMeetingsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleThuMeetings() {
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
else
ThuMeetingsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleFriMeetings() {
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
else
FriMeetingsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleSatMeetings() {
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
else
SatMeetingsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleSunMeetings() {
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
else
SunMeetingsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleLocalEvents() {
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
else
LocalEventsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleCommitteeMeetings() {
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
else
CommitteeMeetingsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
}
function CloseAll() {
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (WedMeetingsContent.style.display == 'block')
WedMeetingsContent.style.display = 'none';
if (ThuMeetingsContent.style.display == 'block')
ThuMeetingsContent.style.display = 'none';
if (FriMeetingsContent.style.display == 'block')
FriMeetingsContent.style.display = 'none';
if (SatMeetingsContent.style.display == 'block')
SatMeetingsContent.style.display = 'none';
if (SunMeetingsContent.style.display == 'block')
SunMeetingsContent.style.display = 'none';
if (AllMeetingsContent.style.display == 'block')
AllMeetingsContent.style.display = 'none';
if (LocalEventsContent.style.display == 'block')
LocalEventsContent.style.display = 'none';
}
< /script>
</body>
</html>
解决方案
处理选择和输入的最佳方法是向其添加侦听器，例如：
$('select').on('change', function(e) {
console.log(this.value); // Here you can do whatever you want
})
推荐阅读
- c++ - 锁定的互斥锁是否保护 condition_variable 以及数据？
- assembly - 存储 x87 FPU 控制字
- html - blogdown：将 html 文件附加到网站中
- angular6 - 在 Angular 6 中创建域模型以用于其他库
- python-2.7 - 移除 USB 闪存后，python 中的 os.path 无法正常工作
- c++ - 在 C++ 中错误地读取 .dat 文件
- apache-spark - 在 pyspark 中使用字符串、索引创建字典（地图）
- javascript - 正则表达式 Javascript
- python - 用子进程和线程中断python程序的正确方法
- security - 如何防止隐藏输入的变化？