javascript - anchor 标记在 div 中不起作用

Question

我正在创建导航栏并遵循 Bootstrap 样式。我的 anchor 标记在下拉导航菜单上不起作用。我尝试了许多人们遇到的类似问题的例子。像 z-index， block 元素， float 。这些似乎都不适用于我的情况。不确定发生了什么。下面是我正在使用的部分代码。我有一个 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 a i{    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

从 anchor click 调用中删除 e.preventDefault();。它阻止元素的默认操作发生。在链接的情况下，它会阻止链接打开 URL。此外，您的大部分链接都没有指定 href。 anchor 标签将导航到哪里？