锚标签在div内不起作用

Question

I am creating a navbar and following bootstrap styling. My anchor tag is not working on the drop-down nav menus. I tried many examples of similar problems people were having. like z-index, block element, floating. None of those seems to work in my case. Not sure whats going on.Below is the partial code i am working with. I have a jquery function that I use to detect the mouse hover so I can drop the menu and other things. there i do have event prevent default. But removing that doesnt seem to do anything either

 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

Remove e.preventDefault(); from the anchor click call. It stops the default action of an element from happening. In case of link, it stops the link from opening the URL. Moreover, most of your links do not have a href specified. Where will the anchor tag navigate to?

Answer 2

You need to include JQuery. I adjusted the following snippet so you could see the outline of the a tag to hover over.

If you're working on a JQuery project and you see the phrase $ is undefined it means that the JQuery library either hasn't been included, has been overwritten, or somewhere in the code you've used JQuery.noConflict() - which allows you to use JQuery objects by using JQuery instead of $ . More often than not it's because it wasn't included.

 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

it may be because jQuery is being sourced after the DOM is ready. Try wrapping your jQuery code in a setTimeout(function () { }, 3000) to get it to wait 3 seconds and see if jQuery becomes visible, if not visible at DOM ready.