OnClick on div 元素仅在其中一部分起作用

Question

几天前我开始创建网站，现在我遇到了第一个真正的问题：

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

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');
      }
    }
  }
}

function myLama(x) {
  x.classList.toggle("change");
}

.dropbtn {
  display                : inline-block;
  margin-right           : 6%    !important; 
  float                  : right !important;
  padding-top            : 0px   !important;
  margin-top             : -40px !important;
  cursor                 : pointer;
  }
.dropdown {
  position               : relative;
  display                : inline-block;
  float                  : right;
  top                    : 40px;
  right                  : 6%;
  }
.dropdown-content {
  display                : none;
  min-width              : 14px;
  box-shadow             : 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index                : 1;
  border-radius          : 25px;
  width                  : 10%;
  float                  : right;
  margin-right           : 33px;
  }
.dropdown-content a {
  color                  : white;
  padding                : 12px 16px;
  text-decoration        : none;
  display                : block;
  border                 : 2px solid white;
  border-radius          : 25px;
  font-size              : 20px;
  margin-top             : 5px;
  }
.dropdown-content a      : hover {
  background-color       : #ffffff10;
  backdrop-filter        : blur(12px);
  -webkit-backdrop-filter: blur(12px);
  }
.show {
  display                : block;
  }
.btn {
  -ms-touch-action       : manipulation;
  touch-action           : manipulation;
  cursor                 : pointer;
  -webkit-user-select    : none;
  -moz-user-select       : none;
  -ms-user-select        : none;
  user-select            : none;
  }
.komorka {
  background-color       : #ffffff10;
  backdrop-filter        : blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width              : 110px;
  box-shadow             : 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index                : 1;
  border-radius          : 25px;
  width                  : 10%;
  border                 : 2px solid white;
  color                  : white;
  margin-left            : auto;
  margin-right           : auto;
  }

  <div class="dropbtn" onclick="myLama(this); myFunction()">
    <div onclick="myFunction()">
      <div class="bar1" ></div>
      <div class="bar2" ></div>
      <div class="bar3" ></div>
    </div>
  </div>

  <div id="myDropdown" class="dropdown-content">
    <a href="#" class="komorka">Link 1</a>
    <a href="#" class="komorka">Link 2</a>
    <a href="#" class="komorka">Link 3</a>
  </div>
</div>

JavaScript 完美运行，但为什么它只在我单击它的一部分时才起作用，而不是当我单击元素上我想要的任何位置时？

我想解决，谁能帮帮我？

here it works

here it doesnt work because i didint click on right spot

Answer 1

我不确定这是否可行，但您可以尝试向 .dropbtn 类添加一些宽度和高度，如下所示：

.dropbtn {
    width: 50px; /*change to the size you need*/
    height: 50px; /*change to the size you need*/
}