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）您将click事件绑定到.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的{{1}}。

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

1 个答案: