所以我正在创建一个简单的网页,但我不能让我的下拉列表工作正常。此时不再出现,当它出现在水平线而不是垂直线上时。
因为它不显示下拉列表。我错过了什么?我有额外的东西是不需要的吗?
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
<nav>
<ul>
<li><a href='front.html'>Home</a></li>
<li><a href='intro.html'>Intro</a></li>
<li><a href='how.html'>How it Works</a></li>
<li><a href='best.html'>Using it</a></li>
<li class ="dropdown">
<a href="javascript:void(0)" class="dropbtn"
onclick="myFunction()">Examples</a>
<ul class="dropdown-content" id="myDropdown">
<div class="dropdown-content" id="myDropdown">
<li><a href='saga.html'>SAGA</a></li>
<li><a href='portfolio.html'>Portfolio Optimization</a></li>
<li><a href='circuits.html'>Evolved Circuits</a></li>
</div>
</ul>
</li>
<li><a href='about.html'>References</a></li>
</ul>
</nav>
答案 0 :(得分:0)
除了您正在寻找的所需样式之外,似乎您在<div class="dropdown-content" id="myDropdown">
中有一个不需要的包装ul
,使列表保持display: none
。删除它很有效。
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
&#13;
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
&#13;
<nav>
<ul>
<li><a href='front.html'>Home</a></li>
<li><a href='intro.html'>Intro</a></li>
<li><a href='how.html'>How it Works</a></li>
<li><a href='best.html'>Using it</a></li>
<li class ="dropdown">
<a href="javascript:void(0)" class="dropbtn"
onclick="myFunction()">Examples</a>
<ul class="dropdown-content" id="myDropdown">
<li><a href='saga.html'>SAGA</a></li>
<li><a href='portfolio.html'>Portfolio Optimization</a></li>
<li><a href='circuits.html'>Evolved Circuits</a></li>
</ul>
</li>
<li><a href='about.html'>References</a></li>
</ul>
</nav>
&#13;
答案 1 :(得分:0)
我刚刚删除了ul标签中的div并覆盖了下拉列表的li标签样式(删除浮动:左边的那些li标签)
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
.dropdown-content li {
float: none !important;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
<nav>
<ul>
<li><a href='front.html'>Home</a></li>
<li><a href='intro.html'>Intro</a></li>
<li><a href='how.html'>How it Works</a></li>
<li><a href='best.html'>Using it</a></li>
<li class ="dropdown">
<a href="javascript:void(0)" class="dropbtn"
onclick="myFunction()">Examples</a>
<ul class="dropdown-content" id="myDropdown">
<li><a href='saga.html'>SAGA</a></li>
<li><a href='portfolio.html'>Portfolio Optimization</a></li>
<li><a href='circuits.html'>Evolved Circuits</a></li>
</div>
</ul>
</li>
<li><a href='about.html'>References</a></li>
</ul>
</nav>
答案 2 :(得分:0)
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content li{
float: none;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {
display:block;
}
<nav>
<ul>
<li><a href='front.html'>Home</a></li>
<li><a href='intro.html'>Intro</a></li>
<li><a href='how.html'>How it Works</a></li>
<li><a href='best.html'>Using it</a></li>
<li class ="dropdown">
<a href="javascript:void(0)" class="dropbtn"
onclick="myFunction()">Examples</a>
<ul class="dropdown-content" id="myDropdown">
<li><a href='saga.html'>SAGA</a></li>
<li><a href='portfolio.html'>Portfolio Optimization</a></li>
<li><a href='circuits.html'>Evolved Circuits</a></li>
</ul>
</li>
<li><a href='about.html'>References</a></li>
</ul>
</nav>
您应该将 position: fixed;
添加到.dropdown内容类,.dropdown-content li
应该有 float: none;
以获得下拉原始效果。