手风琴组件使用 CSS + Javascript 隐藏在初始状态

问题描述

所以我几天来一直在尝试为评论部分构建这个手风琴组件......我真的是 javascript 的新手并且已经想通了，除了崩溃的评论部分显示在初始状态，因此在页面重新加载时，您会看到该部分立即展开，并且只有在您单击展开箭头时才会隐藏。我宁愿它在初始状态下隐藏，因此只有在用户单击展开箭头后才会显示。

我有一个 class="reviewsHide" 作为包装器的 div 和另一个 class="reviewsActive" 作为包装器的 div。它是用 sass 编写的，我尝试提出的任何解决方案都是用 javascript 定位包装器的，但都没有应用它的子类样式，因此最终看起来不正确。在主容器包装器内，我还有 3 个容器部分，每个部分都是自己的容器。每个容器中都有几个类。

                    <div class="reviewsHide">
                        <div class="reviewsActive">
                            <div class="reviewsActive__top">
                                <button href="#" class="reviewsActive__top-smallTxt">Write A Review &rarr;</button>
                                <span class="reviewsActive__top-largeTxt">Reviews(10)</span>
                                <button href="#" class="reviewsActive__top-smallTxt">More Reviews &rarr;</button>
                            </div>
                            <div class="reviewsActive__bottomL">
                                <div class="reviewsActive__bottomL-title">
                                    <img class="starSmall"src="img/main/Starrating.svg" alt="Star rating"> Title
                                </div>
                                <p class="reviewsActive__bottomL-reviewP">
                                    &nbsp Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis,dolorem quae! Quidem officiis rerum nam,veritatis ullam,placeat est doloremque exercitationem,a quis sequi tempora blanditiis eligendi consequuntur. Ipsam a hic eligendi? Facilis vero fugit omnis ducimus inventore ipsam libero ad expedita numquam,ullam delectus ratione modi,atque esse veritatis.
                                </p>
                            </div>
                            <div class="reviewsActive__bottomr">
                                <div class="reviewsActive__bottomr-title">
                                    <img class="starSmall"src="img/main/Starrating.svg" alt="Star rating"> Title 
                                </div>
                                <p class="reviewsActive__bottomr-reviewP">
                                    &nbsp Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis,a quis sequi tempora blanditiis eligendi consequuntur. 
                                </p>
                            </div>
                        </div>
                    </div>

.reviewsHide.show {
    height: 15rem;
    display: none;
}

.reviewsActive {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: white;
    height: 22.5rem;
    font-family: 'Montserrat Alternates',sans-serif;

    &__top {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        height: 3rem;
        width: 100%;

        &-smallTxt {
            cursor: pointer;
            font-size: 1.05rem;
        }

        &-largeTxt {
            font-size: 2rem;
        }
    }

    &__bottomL {
        @include reviewsBottom;
        margin: auto 1rem .75rem 1rem;

        &-title {
            @include reviewsTitle;
        }

        &-reviewP {
            @include reviewsParagraph;
        }
    }

    &__bottomr {
        @include reviewsBottom;
        margin: 1rem 1rem .75rem auto;

        &-title {
            @include reviewsTitle;
        }

        &-reviewP {
            @include reviewsParagraph;
        }
    }
}

    // Get the button,and when the user clicks on it,execute myFunction
    document.querySelector(".span").onclick = function() {myFunction()};
    
    /* myFunction toggles between adding and removing the show class,which is used to hide and show the dropdown content */
    function myFunction() {
      document.querySelector(".reviewsHide").classList.toggle("show");

/* This selector below is for the arrow animation to rotate on click */
      document.querySelector(".span").classList.toggle("spanshow");
    }

解决方法

重新编写了我的 javascript 并按预期工作

const reviewsOpen = () => {
    var expandArrow = document.querySelector(".span");
    var hide = document.querySelector(".reviewsHide");

    expandArrow.addEventListener('click',() => {
        hide.classList.toggle("reviewsHide");
        expandArrow.classList.toggle("spanshow")
    });
}

reviewsOpen();