Question

尝试使用可折叠标题创建列表，但是当我在列表中单击时，它会折叠。

这是我的javascript，（我还不知道jQuery）

function comFunc() {
document.getElementById("Community").classList.toggle("show");

document.onclick = function(event) {
    var x = document.getElementById("Community");
    var y = document.getElementById("comarrow");

        if (x.classList.contains("show")) {
            y.classList.remove("glyphicon-menu-right");
            y.classList.add("glyphicon-menu-down");
        } else {
            y.classList.remove("glyphicon-menu-down");
            y.classList.add("glyphicon-menu-right");
            }
        }
window.onclick = function(event) {
        var x = document.getElementById("Community");
        var y = document.getElementById("comarrow");

        if (!event.target.matches('.resbtn')) {
            x.classList.remove('show');
            y.classList.remove("glyphicon-menu-down");
            y.classList.add("glyphicon-menu-right");
            }
        }
}

我尝试使用“||”如在

if (!event.target.matches('.resbtn' || '.dropdown-content')) {

但这似乎不起作用。

有什么想法吗？

Answer 1

如Selectors中所述，您需要一个逗号来组合两个选择器。

因此，改变自：

if (!event.target.matches('.resbtn' || '.dropdown-content')) {

为：

if (!event.target.matches('.resbtn, .dropdown-content')) {

＆＃13;

document.querySelectorAll('button').forEach(function(ele, idx) {
   ele.addEventListener('click', function(e) {
       var x = event.target.matches('.resbtn, .dropdown-content');
       console.log('matches=' + x + '\nhtml:' + this.outerHTML);
   });
});

＆＃13;

<button id="btn1" class="resbtn">Click Me</button>
<button id="btn2" class="dropdown-content">Click Me</button>
<button id="btn3" class="noOne">Click Me</button>

＆＃13;

尽管使用了javascript，但点击下拉列表会关闭它

1 个答案: