연말까지 매일 웹 사이트를 만드는 대학생~ 18일째 Ap●le 공식 사이트의 Footer를 따라 해보세요~

입문

안녕하세요.
연말까지 매일 웹 사이트를 만드는 사람입니다.
예전에는 Ap●le 공식 사이트의 첫 번째 보기를 본떠서 만들었는데, 이번에는 Footer를 본떠서 만들었다.
예전에는 외관이었지만 이번에는 기능에 초점을 맞췄다.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 18일째다.(2019/11/5)
잘 부탁드립니다.

사이트 URL

https://sin2cos21.github.io/day18.html

한 일

Ap●le의 Footer를 흉내 내서 만들었어요.
공식 홈페이지는 이거(모호)↓

화면 크기가 작으면 세로로 배열하고 클릭하면 펼쳐집니다.
그럼 모방한 녀석을 보자!↓

우선 html로 표시하고 싶은 물건을 목록에 따라 배열합니다.

    <div class="footer_wrapper">
        <div class="footer_direction_column">
            <h3 class="panel">製品と情報と購入</h3>
            <ul class="closed">
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
            </ul>
        </div>

        <div class="footer_direction_column">
            <h3 class="panel">サービス</h3>
            <ul class="closed">
                <li>Epple</li>
                <li>Epple</li>
                <li>Epple</li>
                <li>Epple</li>
            </ul>
            <h3 class="panel">アカウント</h3>
            <ul class="closed">
                <li>Upple</li>
                <li>Upple</li>
                <li>Upple</li>
            </ul>
        </div>
...
<!--以下続く-->

크기가 작아지면 목록 부분의 표시가 사라지고 h3 부분만 남습니다.그것의 실현은 미디어 검색을 사용하여 일정한 크기에 도달한 후에display를 none로 설정하는 것입니다.(closed 클래스에서 실행)

@media screen and (max-width:767px) {
    .closed {
        display: none;
    }
...

마지막으로 화면 크기가 작을 때 패널을 누르면 목록의 문자열이 나오거나 사라지는 것을 실현하지만, 거기는 자바스크립트로 이루어진다.

window.onload = function () {

    let test = document.getElementsByClassName('panel');

    console.log(test);

    function h3Click(event) {
        console.log(event.target);
    }

    for (var i = 0; i < test.length; i++) {
        console.log(test[i]);
        test[i].addEventListener('click', function (e) {
            console.log(1);
            var nowNode = e.target;
            var nextNode = nowNode.nextElementSibling;
            if (nextNode.className == 'closed') {
                nextNode.classList.remove('closed');
                console.log(2);
            } else {
                nextNode.classList.add('closed');
                console.log(3);
            }

        })
    }
}

이벤트 탐지기를 눌렀을 때 함수를 실행합니다.
함수는 다음 요소, 즉 나타나거나 사라지는 목록을 표시하기 위해 이벤트를 매개 변수에 전달합니다.
반에closed가 있으면 빼고 없으면 끼고 클릭하면 나타나거나 사라지는 것처럼 보여요.안녕히 계세요,display:none;그냥 끼거나 떼는 거예요.

감상

도중에 get Elements By ClassName이 얻은 요소가 잘 반영되지 않아 상당히 오랫동안 먹었다.결과 윈도우.원본 코드의 머리 위에 onload를 올려 해결했지만 실행 순서를 의식하지 않으면 DOM의 상태는 앞으로도 똑같은 일이 발생할 수 있음을 반성했다.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.