如何在js中关闭 "复选框 "下拉框onBlur？

Question

我有一个通过隐形复选框做的下拉式。这个下拉框工作正常，但它不想关闭，除非我再次点击标签。

问题是onBlur从未被调用。为什么呢？如果我设置了onMouseOut--它可以触发，但它会立即关闭下拉菜单。

我已经看到 当用户在下拉菜单外点击时，如何隐藏下拉菜单？ 但我没有弄清楚如何通过道具到最后的解决方案......

        <div onBlur ={handleUncheckCheckbox} className="dropdown">
            <input id="check01" type="checkbox" name="menu"/>
            <label for="check01" className="sorting-element">click me</label>
            <div id ="dd" className="dropdown-content">
                <p>1</p>
                <p>2</p>
                <p>3</p>
            </div>
        </div>

Answer 1

好吧，我没有得到如何调用onBlur，要么我这样做。

window.onclick = function(event) {
    if (event.target.className !== "dropdown-icon" ) {
        document.getElementById("dd").style.display = "none";
    }
};