Question

所以我们有一个简单的下拉列表，但是当你点击图片时，它不会激活下拉列表。

由于我们在Shopify中完成了这项工作，因此有一些代码段难以写出来。所以我刚刚在CodePen中重新创建。正如您在示例中所看到的，单击图像不会激活下拉列表。

HTML

<div class="dropdownprod">
              <div onclick="dropDowntown()" class="dropbtn">
                <span class="dropdowncheese">Styles</span>PRODUCT TITLE<img class="dropimg2" src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Small_rhombihexahedron.png" style="height:45px;"></div>
              <div id="myDropdown" class="dropdown-content">
               THE DROPDOWN CONTENT GOES HERE
              </div>
             </div>

JS

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function dropDowntown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu 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');
      }
    }
  }
}

但是如果你单击图像并检查源代码，那么代码部分将变为紫色。它只是没有改变。有这个原因吗？

Answer 1

由于你的window.onclick功能关闭了下拉列表。当您单击图像或范围时，dropDowntown()会触发添加该类，然后window.onclick()会立即触发删除它。将span和image添加到if语句中，这样它们就不会触发关闭脚本。

Dropdown Div（onclick）中的图像不会激活下拉列表

1 个答案: