如何使按钮中的字体真棒图标可点击？

Question

我在按钮中有一个图标。当我单击按钮时（实际上是按钮区域的其余部分，图标除外），按钮将在其下方显示一个下拉列表。但是，当我单击按钮中的向下箭头图标时，下拉列表不会显示。我需要确保按钮和图标都是可点击的。我该怎么做？

这里是sn-p的代码：

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

#myDropdown {
  display: none;
}
#myDropdown.show {
  display: block;
}

<div class="dropdown">
    <button onclick="myFunction()" class="btn dropbtn btn-primary">
        More <i style='font-size:16px' title='More' class='fas'>&#xf0d7;</i>
    </button>

    <div id="myDropdown" class="dropdown-content" style="line-height:15px;">                
        <a href="#" target="_blank">Duplicate New</a>
        <a href="#" target="_blank">Download PDF</a>
        <a href="#" target="_blank">Print PDF</a>        
        <a href="#" class="delete" data-id="{{ $dataTypeContent->getKey() }}" id="delete-{{ $dataTypeContent->getKey() }}">Delete</a>        
    </div>
</div>

Answer 1

window.onclick 函数也应在您单击 <button> 或 <i> 时触发，但由于当您单击 <i> 时 event.target 不是 dropbtn 它很可能会通过if (!event.target.matches('.dropbtn')) 检查并关闭下拉菜单，就像单击屏幕上的其他位置一样。

我会尝试if (!event.target.matches('.dropbtn') && !event.target.matches('.fas')) 看看是否可以解决问题。如果是这样，我会向<i> 添加一个更具体的类，例如dropdown-toggle 并检查它是否匹配，否则如果您单击屏幕上的任何其他字体真棒图标，它不会关闭下拉列表。

更新 - 看起来是这样，这里是 JSFiddle https://jsfiddle.net/p1kw746q/