如何解决手风琴组件使用 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 →</button>
<span class="reviewsActive__top-largeTxt">Reviews(10)</span>
<button href="#" class="reviewsActive__top-smallTxt">More Reviews →</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">
  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">
  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();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。