我有一个Press Me
按钮,当按下时会打开一个下拉菜单.我的JavaScript可以工作,但我在使用CSS和HTML时遇到了以下问题:
当您点击Press Me
时,下拉菜单打开,但它部分不在可见窗口中.您必须向右滚动才能看到问题.
我试着用带一些号码的right: px
,但现在一点react 都没有.
// NO PROBLEM HERE IN JAVASCRIPT!
function myFunction() {
document.getElementsByClassName('dropdown-content')[0].classList.toggle('show');
}
window.onclick = function(event) {
if (!event.target.matches('#verify-name')) {
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');
}
}
}
}
.buttons {
display: flex;
justify-content: flex-end;
color: red;
}
.dropdown-content {
display: none;
position: absolute;
width: 120px;
padding: 14px;
background-color: yellow;
}
.show {
display: flex;
}
<div class="buttons">
<div>
<a id="verify-name" onclick="myFunction()">Press Me</a>
<div class="dropdown-content">
<span>Logout</span>
</div>
</div>
</div>