带有多个子项的手风琴菜单（面板）

Question

我对编码很陌生。我正在尝试创建一个带有多个“下拉”子面板的手风琴菜单。我大部分时间都在关注 w3schools 的“操作方法” - https://www.w3schools.com/howto/howto_js_accordion.asp

我遇到的问题是，当我想显示顶部菜单项的所有兄弟/子项时，它使用了“nextElementSibling”。

有什么方法可以轻松“获取”所有元素兄弟姐妹吗？

这是我正在开发的代码笔 - https://codepen.io/kbeats/pen/RYzzdW

我的菜单 html 是 -

<ul id="moduleOneList">
    <li class="tile" id="moduleOneTitle"> Module One
        <li class=subTile id="oneSlideOne"> Title Slide</li> 
        <li class=subTile id="oneSlideTwo"> References </li>
    </li>
</ul>
<ul id="moduleTwolist">
    <li class=tile id="moduleTwoTitle"> Module Two
        <li class=subTile id="twoSlideOne"> Title Slide </li>
        <li class=subTile id="twoSlideTwo"> References </li> 
        <li class=subTile id="twoSlideThree"> Third Slide </li>
    </li>

我的 CSS

    ul {
    list-style:none;
}



li {
    position: relative;
    left: -40px;
    text-decoration: none;
    display: block;
}


.tile {
    background-color: #74A3EB;
    height: 60px;
    width: 220px;
    border-radius: 10px;
    color: white;
    font-family: lato;
    font-weight: 700;
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    margin: 10px 2px 2px 10px;
    transition: 0.4s ease-in-out;
}

.active, .tile:hover {
    background-color: #3C72F0; /* change this color */
}

.subTile {
    display: none;
    background-color:#4337DD;
    width: 220px;
    height: 40px;
    border-radius: 10px;
    display: none;
    overflow: hidden;
    color: white;
    font-family: lato;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    margin: 6px 10px 0px 10px; 
    cursor: default;
    transition: background-color 0.5s ease-in-out;
}



.subTile:hover {
    background-color: #605DE8;
}

还有我关于手风琴菜单的 javascript

    var acc = document.getElementsByClassName("tile");
var i;

for (i=0;i<acc.length;i++) {
    acc[i].addEventListener("click", function(){
        if(this.classList != "active") {
            this.classList.toggle("active");
        } else {
            this.removeClass("active");
        }


        var panel = $('.tile').nextAll();
        if(panel.style.display == "block"){
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }

    });
}

我试过了

 $('.tile').nextAll(); 

以所有孩子为目标，但这似乎不起作用。

Answer 1

这是一个有效的codepen。

1) 您将点击事件绑定到.tile，.subTile 是.tile 的子节点而不是兄弟节点。

2) this.classList != "active" 将始终返回 true，因为 classList 是 title 或 title active。

并且在切换类之前不需要检查，所以只需使用this.classList.toggle("active");

3)var panel = $('.tile').nextAll();

panel 这里是 jQuery 对象而不是 DOM 元素，你不能使用 panel.style.display = "..."; 改变样式。

由于您在这里使用 jQuery，因此可以使用 show() 或 hide() 来完成，如下所示。

// this here is the element that just being clicked,
// $("ul,li", this) equals $(this).find("ul,li")
var $panel = $("ul,li", this); // add a $ sign to remind it's a jQuery object
this.classList.contains("active") ? $panel.show() : $panel.hide();

请注意，您可能需要在 CSS 中注释掉 .tile 的 height: 60px;。