Question

我正在尝试添加一个带有搜索/过滤器的下拉菜单，其中包含以下两项：“ Categoria”和“ Nome”。我能够为两者创建功能。但是，除非停止用鼠标在框外单击，否则我不能在文本框中输入“ Categoria”类别，否则框将消失。我的意思是，当我快速单击文本框“ Procurar”时，它消失了。对于项目“ Nome”，它可以正常工作。我觉得这很奇怪，因为代码是重复的（我很确定这不是做事情的好方法）。下面是实现代码。感谢您的帮助！

HTML + JavaScript

<div class="dropDown">
    <button onclick="dropDown()" class="dropBtn">Filtro</button>
        <div id="myDropDown" class="dropDown-content">
            <button onclick="containCatText()" class="catbtn">Categoria</button>
                <div id="myDropdownCat" class="catdown-content">
                    <input type="text" placeholder="Procurar.." id="myInput" onkeyup="filterFunction()">
                </div>
            <button>Data</button>
            <button onclick="containNamText()" class="nambtn">Nome</button>
                <div id="myDropdownNam" class="namdown-content">
                    <input type="text" placeholder="Procurar.." id="myInput" onkeyup="filterFunction()">
                </div>
        </div>
    </div>
</div>
<script>
    function containCatText() {
        document.getElementById("myDropdownCat").classList.toggle("show");
    }
    function containNamText() {
        document.getElementById("myDropdownNam").classList.toggle("show");
    }
    window.onclick = function(event) {
        if (!event.target.matches('.catbtn')) {
            var dropdowns = document.getElementsByClassName("catdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
        else if (!event.target.matches('.nambtn')) {
            var dropdowns1 = document.getElementsByClassName("namdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }
</script>

CSS

.dropBtn {
    background-color: black;
    color: #B0ADAD;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropBtn:hover, .dropBtn:focus {background-color: #3c3c3c;}
.dropDown {
    position: relative;
    float: right;
    margin-top: -37px;
    margin-right: 70px;
}
.dropDown-content {
    display: none;
    position: absolute;
    background-color: #3c3c3c;
    min-width: 103.53px;
    overflow: visible;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropDown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropDown a:hover {background-color: #ddd;}
.Show {display: block;}

#myInput {
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.catbtn {
    background-color: #3c3c3c;
    color: #B0ADAD;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.catbtn:hover, .catbtn:focus {background-color: black;}
.catdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: visible;
    border: 1px solid #ddd;
    z-index: 1;
}
.catdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.nambtn {
    background-color: #3c3c3c;
    color: #B0ADAD;
    padding: 16px 42px 16px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.nambtn:hover, .nambtn:focus {background-color: black;}
.namdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: visible;
    border: 1px solid #ddd;
    z-index: 1;
}
.namdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.show {display: block;}

结果

带有搜索/过滤器的下拉菜单

0 个答案: