Аккордеонное меню с несколькими детьми (панели) - PullRequest
Новая
       5

Аккордеонное меню с несколькими детьми (панели)

0 голосов
/ 27 сентября 2018

Я очень плохо знаком с кодированием.Я пытаюсь создать аккордеонное меню с несколькими «выпадающими» дочерними панелями.Я следовал по большей части этому «как» из 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();

для нацеливания на всех детей, но, похоже, это не такработать

1 Ответ

0 голосов
/ 27 сентября 2018

Вот рабочий 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();

Обратите внимание, что вам может понадобиться закомментировать .tile 'height: 60px; вCSS.

...