我正在设计一个网站，因为我正在向其添加可点击的按钮。我的导航栏上面有一些空白。以前我曾发布过同样的问题，但现在我不知道我的CSS出了什么问题。请纠正或指出我的 CSS 哪里做错了。我不想渲染我的导航栏，其上方有空白。所以，请更改 CSS，并告诉我哪里出错了。我还添加了 css 图标。正如我function myFunction(event) { var clickedElement = event.target; console.log(clickedElement); if (clickedElement.nodeName != 'BUTTON') { clickedElement = clickedElement.parentElement; } var dropdownElement = clickedElement.nextElementSibling; dropdownElement.classList.add('tempClass'); //adding tempclass to avoid this in below loop var allOtherDropdowns = document.getElementsByClassName('dropdown-content'); //close all other dropdowns for (var i = 0; i < allOtherDropdowns.length; i++) { if (!allOtherDropdowns[i].classList.contains('tempClass')) { allOtherDropdowns[i].classList.remove('show'); } } dropdownElement.classList.toggle("show"); dropdownElement.classList.remove('tempClass'); //removing the temp class here}// Close the dropdown if the user clicks outside of itwindow.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var allDropdowns = document.getElementsByClassName('dropdown-content'); //close all other dropdowns for (var i = 0; i < allDropdowns.length; i++) { allDropdowns[i].classList.remove('show'); } }}
1 回答
米琪卡哇伊
TA贡献1998条经验 获得超6个赞
你的h3文字Dropdown Menu inside a Navigation Bar有一个边距。而且你的身体也有很小的余量。现在应该好了。
function myFunction(event) {
var clickedElement = event.target;
//console.log(clickedElement);
if (clickedElement.nodeName != 'BUTTON') {
clickedElement = clickedElement.parentElement;
}
var dropdownElement = clickedElement.nextElementSibling;
dropdownElement.classList.add('tempClass'); //adding tempclass to avoid this in below loop
var allOtherDropdowns = document.getElementsByClassName('dropdown-content');
//close all other dropdowns
for (var i = 0; i < allOtherDropdowns.length; i++) {
if (!allOtherDropdowns[i].classList.contains('tempClass')) {
allOtherDropdowns[i].classList.remove('show');
}
}
dropdownElement.classList.toggle("show");
dropdownElement.classList.remove('tempClass'); //removing the temp class here
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var allDropdowns = document.getElementsByClassName('dropdown-content');
//close all other dropdowns
for (var i = 0; i < allDropdowns.length; i++) {
allDropdowns[i].classList.remove('show');
}
}
}
function myFunc(){return true}
h3,body,html{
margin:0;
padding:0;
}
i {
width: 0;
height: 0;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #ffffff transparent transparent transparent;
}
.icon {
position: relative;
/* Adjust these values accordingly */
top: 14px;
left: 9px;
}
nav {
height: 40px overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.drop-btn {
float: right;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 14px;
border: none;
outline: none;
color: white;
padding: 10px 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
nav a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(event)">Programming
<i class="icon"></i>
</button>
<div class="dropdown-content">
<a href="#" onclick="myFunc();">Java</a>
<a href="#">C++</a>
<a href="#">Python</a>
<a href="#">Swift</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(event)">Platform
<i class="icon"></i>
</button>
<div class="dropdown-content">
<a href="#" onclick="myFunc();">Linux</a>
<a href="#">Windows</a>
<a href="#">Development Editor</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Algorithm
</button>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(event)">Upgrade 4
<i class="icon"></i>
</button>
<div class="dropdown-content">
<a href="#" onclick="myFunc();">item 10</a>
<a href="#">item 11</a>
<a href="#">item 12</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(event)">Upgrade 4
<i class="icon"></i>
</button>
<div class="dropdown-content">
<a href="#" onclick="myFunc();">item 10</a>
<a href="#">item 11</a>
<a href="#">item 12</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction(event)">Upgrade 4
<i class="icon"></i>
</button>
<div class="dropdown-content">
<a href="#" onclick="myFunc();">item 10</a>
<a href="#">item 11</a>
<a href="#">item 12</a>
</div>
</div>
<nav>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
- 1 回答
- 0 关注
- 72 浏览
添加回答
举报
0/150
提交
取消