锚标签不在div内工作

Question

我正在创建一个导航栏并遵循引导样式。我的锚标签不适用于下拉导航菜单。我尝试了许多人们遇到类似问题的例子。像z-index，块元素，浮动。这些似乎都不适合我的情况。不确定是什么.Below是我正在使用的部分代码。我有一个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

从锚e.preventDefault();电话中移除click。它会停止元素的默认操作。如果是链接，它会阻止链接打开URL。此外，您的大多数链接都没有指定href。锚标记将在哪里导航到？

Answer 2

您需要包含JQuery。我调整了以下代码段，以便您可以看到悬停在其上的标记的轮廓。

如果您正在处理JQuery项目并且看到短语$ is undefined，则意味着JQuery库未被包含，已被覆盖，或者您使用的代码中的某处{{ 1}} - 允许您使用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 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; border: 1px black solid;}

Answer 3

这可能是因为在DOM准备好之后才开始使用jQuery。尝试将jQuery代码包装在setTimeout（function（）{}，3000）中，让它等待3秒，看看jQuery是否可见，如果在DOM就绪时不可见。