我正在尝试创建可折叠元素，我希望在首次加载时默认展开所选元素。现在所有的元素都默认展开。
例如，我希望默认展开第一个和最后一个元素，直到我单击将其折叠，第二个和第三个默认折叠，直到我单击将其展开。
这是我正在使用的代码。
非常感谢您的帮助。
此外，我不了解这段代码的功能。那么有人可以向我解释一下 javascript 是如何工作的吗？
谢谢。
最好的，
// expendable info
$(document).ready(function(){
$('.buy-info .tit').click(function(){
$(this).toggleClass('active');
$(this).next('.con').slideToggle(300);
});
});.buy-info .notice {
position: relative;
background: #f4f4f4;
border-bottom: 1px solid #fff;
text-align: center;
font-size: 14px; line-height: 40px;
cursor: pointer;
}
.buy-info .tit {
position: relative;
background: #f4f4f4;
border-bottom: 1px solid #fff;
text-align: center;
font-size: 14px; line-height: 40px;
cursor: pointer;
}
.buy-info .tit:after {
content: '';
position: absolute; top: 14px; right: 12px;
width: 6px; height: 6px;
border: solid #111;
border-width: 2px 0 0 2px;
transform: rotate(225deg);
transition: all .3s;
}
.buy-info .tit.active:after {
top: 18px;
transform: rotate(45deg);
}
.buy-info .con {
/*display: none;*/
padding: 20px;
font-size: 11px; line-height: 1.4;
}
#prdInfo {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="untitled.css">
<script src="untitled.js"></script>
</head>
<body>
<div class="buy-info">
<div class="notice">NOTICE</div>
<div class="tit active"> NOTICE 1</div>
<div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="tit active">NOTICE 2</div>
<div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="tit active">Notice3</div>
<div class="con">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="tit">Notice 4</div>
<div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>最佳答案
你可以这样做:
$(document).ready(function() {
$('.buy-info .tit').click(function() {
$(this).toggleClass('active');
!$(this).hasClass('active') ? $(this).next('.con').slideUp(300) : $(this).next('.con').slideDown(300);
});
$('.buy-info .tit.active').each(function() {
!$(this).hasClass('active') ? $(this).next('.con').slideUp(300) : $(this).next('.con').slideDown(300);
})
});
因此，您将 .active 类添加到您希望默认显示的类中。
我还在 .buy-info .con 中启用了 display:none 行
演示
// expendable info
$(document).ready(function() {
$('.buy-info .tit').click(function() {
$(this).toggleClass('active');
!$(this).hasClass('active') ? $(this).next('.con').slideUp(300) : $(this).next('.con').slideDown(300);
});
$('.buy-info .tit.active').each(function() {
!$(this).hasClass('active') ? $(this).next('.con').slideUp(300) : $(this).next('.con').slideDown(300);
})
});.buy-info .notice {
position: relative;
background: #f4f4f4;
border-bottom: 1px solid #fff;
text-align: center;
font-size: 14px;
line-height: 40px;
cursor: pointer;
}
.buy-info .tit {
position: relative;
background: #f4f4f4;
border-bottom: 1px solid #fff;
text-align: center;
font-size: 14px;
line-height: 40px;
cursor: pointer;
}
.buy-info .tit:after {
content: '';
position: absolute;
top: 14px;
right: 12px;
width: 6px;
height: 6px;
border: solid #111;
border-width: 2px 0 0 2px;
transform: rotate(225deg);
transition: all .3s;
}
.buy-info .tit.active:after {
top: 18px;
transform: rotate(45deg);
}
.buy-info .con {
display: none;
padding: 20px;
font-size: 11px;
line-height: 1.4;
}
#prdInfo {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="untitled.css">
<script src="untitled.js"></script>
</head>
<body>
<div class="buy-info">
<div class="notice">NOTICE</div>
<div class="tit active"> NOTICE 1</div>
<div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="tit">NOTICE 2</div>
<div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="tit">Notice3</div>
<div class="con">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="tit active">Notice 4</div>
<div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>关于javascript - 使用javascript的可折叠元素如何默认折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70107963/