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

Question

我对编码还很陌生。我正在尝试创建一个包含多个 'drop down' 子面板的手风琴菜单。我大部分时间都在关注这个 'how to' 来自 w3schools - https://www.w3schools.com/howto/howto_js_accordion.asp

我遇到的问题是当我想显示顶部菜单项的所有 siblings/children 时使用 'nextElementSibling'。

有什么方法可以轻松 'get' 所有元素兄弟？

这是我正在使用的代码笔 - 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" 总是 return true 因为 classList 是 title 或 title active.

并且在切换class之前不需要检查，所以只需使用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;

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

Accordion Menu with Multiple Children (panels)

html

javascript

css

jquery

accordion