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

Question

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

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

                    <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, dolorem quae! Quidem officiis rerum nam, veritatis ullam, placeat est doloremque exercitationem, 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");
    }

Answer 1

将我的 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();

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

Accordion component hide on initial state with CSS + Javascript

html

javascript

css

accordion

onclicklistener