1

Всем привет, делаю сайт для практики, с использование библиотеки Bootstrap 4, хочу реализовать сайдбар с выпадающим меню, что бы при клике на кнопку 'Фильмы','Сериалы', список разворачивался с его содержимым. Пробовал с помощью js схватить элементы, и повесить на них событие мыши, но ничего не выходит. Можно не прям готовый код, а примерно возможные варианты решения. Ссылка на полную страницу: https://jsfiddle.net/f7doLax8/.

let getList = document.querySelectorAll('.sideBtn');

for(let a  of getList) {
    console.log(a);
    a.addEventListener('click' , showList);
}

function showList () {
    let getHide = document.querySelector('.hide');
    console.log(getHide);
    for (let i = 0; i < 1; i++) {
        if(getHide.style.display == 'block') {
            getHide.style.display = 'none';
        } else { 
            getHide.style.display = 'block';
        }
    }
}

/*for(let b of getHide) {
    console.log(b);
    if(b.style.display == 'none') {
        b.style.display = 'block';
    } else { 
        b.style.display = 'none';
    }
        
}*/
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}


.sidebar {
    position: fixed;
    width: 250px;
    height: 100%;
    background: #042331;
    transition: all .5s ease;
}
.sidebar ul {
    list-style-type: none;
}


.sidebar ul li a {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 60px;
    font-size: 20px;
    color: white;
    padding-left: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid black;
    border-top: 1px solid rgba(255,255,255,.1);
    transition: .4s;
    text-decoration: none;
}

  ul li:hover a {
    padding-left: 50px;
}
  .sidebar ul a i {
    margin-right: 16px;
}
.hide {
    display: none;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Hello, world!</title>
  </head>
  <body>
     <section class="sidebar">
        <ul>
            <li class="sideBtn">
                <a href="#">
                    <i class="fas fa-tv"></i>
                    Сериалы
                </a>
                <ul class="hide">
                    <li><a href=""><i class="fas fa-star"></i>Лучшие</a></li>
                    <li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
                </ul>
            </li>
            <li class="sideBtn">
                <a href="#">
                    <i class="fas fa-film"></i>
                    Фильмы
                </a>
                <ul class="hide">
                    <li><a href=""><i class="fas fa-star"></i>Лучшие</a></li>
                    <li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
                </ul>
            </li>
          </ul>

     </section>

    <script src="scritp.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Спасибо!

1 ответ 1

-1
$(".dropdown-toggle").click(function(e){
    e.preventDefault();
  $(this).siblings("ul").toggle();
});

https://jsfiddle.net/qmhukoLa/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.