锚标签在div内不起作用

Question

我正在创建一个导航栏，并遵循引导样式。 我的锚标记在下拉导航菜单上不起作用。 我尝试了许多人们遇到类似问题的例子。 像z-index，块元素，浮动。 在我看来，这些都不起作用。 不知道发生了什么。下面是我正在使用的部分代码。 我有一个jquery函数，用于检测鼠标悬停，因此可以删除菜单和其他内容。 那里我确实有事件阻止默认值。 但是删除它似乎也没有任何作用

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } } $(document).ready(function () { $(' .dropdown-content a').click(function (e) { e.preventDefault(); $(' .dropdown-content a').removeClass('active1'); $(this).closest(' .dropdown li').find("a:eq(0)").addClass('active1'); $(this).closest(' .top-nav li').find("a:eq(0)").addClass('dropbtn'); $(this).addClass('active1'); }); }); 

 .navbar-inverse{background-color:#004f8e!important; border-color: #004f8e!important; border-radius:0px!important; border-top: 6px solid #57be17!important;} .top-nav li a{color:white!important;} .top-nav li ai{ font-size: 9px; vertical-align: middle;margin-top: -3px; margin-right: 12px;} .dropbtn {color: white; padding: 16px; font-size: 16px;border: none;cursor: pointer;} .dropdown { position: relative; display: inline-block;} .dropdown-content { display: none; position: absolute; background-color: #f9f9f9;min-width: 190px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 5;} .dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block; z-index: 15;} .dropdown:hover .dropdown-content { display: block;} .dropdown:hover .dropbtn { text-decoration:none; background-color:#57be17;} .active1{background:#57be17;} a{ text-decoration:none!important;} 

  <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav top-nav pull-right"> <div class="dropdown"> <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</a></li> <div class="dropdown-content"> <a href="https://www.yahoo.com/">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> </div> </div> <div class="dropdown"> <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</a></li> <div class="dropdown-content"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> </div> </div> <div class="dropdown"> <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</a></li> <div class="dropdown-content"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> </div> </div> <div class="dropdown"> <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</a></li> <div class="dropdown-content"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> </div> </div> <div class="dropdown"> <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</a></li> <div class="dropdown-content"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> </div> </div> </ul> </div> 

Answer 1

删除e.preventDefault(); 从定位click呼叫。 它阻止发生元素的默认操作。 如果是链接，它将阻止链接打开URL。 此外，您的大多数链接都没有指定href。 定位标记将导航到哪里？

Answer 2

您需要包括JQuery。 我调整了以下代码段，以便您可以看到要悬停的代码的轮廓。

如果您正在处理JQuery项目，并且看到短语$ is undefined则意味着JQuery库尚未包括，已被覆盖或在您使用过JQuery.noConflict()的代码中-允许您通过使用JQuery而不是$使用JQuery对象。 通常是因为不包含在内。

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } } $(document).ready(function () { $(' .dropdown-content a').click(function (e) { e.preventDefault(); $(' .dropdown-content a').removeClass('active1'); $(this).closest(' .dropdown li').find("a:eq(0)").addClass('active1'); $(this).closest(' .top-nav li').find("a:eq(0)").addClass('dropbtn'); $(this).addClass('active1'); }); }); 

 .navbar-inverse{background-color:#004f8e!important; border-color: #004f8e!important; border-radius:0px!important; border-top: 6px solid #57be17!important;} .top-nav li a{color:white!important;} .top-nav li ai{ font-size: 9px; vertical-align: middle;margin-top: -3px; margin-right: 12px;} .dropbtn {color: white; padding: 16px; font-size: 16px;border: none;cursor: pointer;} .dropdown { position: relative; display: inline-block;} .dropdown-content { display: none; position: absolute; background-color: #f9f9f9;min-width: 190px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 5;} .dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block; z-index: 15;} .dropdown:hover .dropdown-content { display: block;} .dropdown:hover .dropbtn { text-decoration:none; background-color:#57be17;} .active1{background:#57be17;} a{ text-decoration:none!important; border: 1px black solid;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav top-nav pull-right"> <div class="dropdown"> <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</a></li> <div class="dropdown-content"> <a href="https://www.yahoo.com/">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> </div> </div> <div class="dropdown"> <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</a></li> <div class="dropdown-content"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> </div> </div> <div class="dropdown"> <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</a></li> <div class="dropdown-content"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> </div> </div> <div class="dropdown"> <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</a></li> <div class="dropdown-content"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> </div> </div> <div class="dropdown"> <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</a></li> <div class="dropdown-content"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> </div> </div> </ul> </div> 

Answer 3

可能是因为DOM准​​备就绪后才生成jQuery。 尝试将jQuery代码包装在setTimeout（function（）{}，3000）中，使其等待3秒钟，看看jQuery是否变为可见（如果在DOM准备就绪时不可见）。