我在我的网站上设置了一个下拉按钮，但我得到了这个奇怪的东西。下拉部分仅在我单击按钮框时显示，但在单击“工具”时不显示。我究竟做错了什么？非常感谢!
(好吧，W3学校不会把代码拿来保存，所以我只好自己手动了)
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
} .dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
button.dropbtn{
background:none;
border:none;
padding:0;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;} <body>
<div class="column-outlet">
<button onclick="myFunction()" class="dropbtn"><strong>Tools</strong></button>
<div id="myDropdown" class="dropdown-content">
<li class="force-css"><a href="#">Blok 1</a></li>
<li class="force-css"><a href="#">Blok 1</a></li>
<li class="force-css"><a href="#">Blok 1</a></li>
</div>
</div>最佳答案
从按钮中删除强标签。
<body>
<div class="column-outlet">
<button onclick="myFunction()" class="dropbtn">Tools</button>
<div id="myDropdown" class="dropdown-content">
<li class="force-css"><a href="#">Blok 1</a></li>
<li class="force-css"><a href="#">Blok 1</a></li>
<li class="force-css"><a href="#">Blok 1</a></li>
</div>
</div>
</body>
关于javascript - 如何通过单击文本打开下拉按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55628624/