如何通过单击文本打开下拉按钮? [英] How to open dropdown button by clicking on text?
本文介绍了如何通过单击文本打开下拉按钮?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的网站上设置了一个下拉按钮，但是我得到了这个奇怪的东西.下拉部分仅在单击按钮框时显示，而在单击工具"时不显示.我究竟做错了什么?非常感谢！
I'm setting a dropdown button on my website, but I get this weird thing. The dropdown part only shows when I click on the box of the button, but not when I click on "Tools". What am I doing wrong? Thanks so much!
(好的，W3学校不会保存代码，因此我必须手动执行此操作)
(Ok, W3 school will not take the code to save, so I have to do this manually)
/* 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>
这篇关于如何通过单击文本打开下拉按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
