javascript - Ajax jQuery Accordion 在页面上显示前 5 个元素
问题描述
我想做的是 Ajax 页面中的前五个手风琴元素。通过 ajax 加载现有内容后,我无法将现有内容保持为手风琴格式。是否可以使用 .load() 仅拉出前五名?我该如何解决这个问题?
我想 ajax 的页面来自:
<div id="main" class="accordians">
<h3>Collapsible Group Item #1</h3>
<div>
<p>This is section 1. Place your content here in paragraphs or use div elements etc.</p>
</div>
<h3>Collapsible Group Item #2</h3>
<div>
<p>This is section 2. Place your content here in paragraphs or use div elements etc.</p>
</div>
<h3>Collapsible Group Item #3</h3>
<div>
<p>This is section 3. Place your content here in paragraphs or use div elements etc.</p>
</div>
<h3>Collapsible Group Item #4</h3>
<div>
<p>This is section 4. Place your content here in paragraphs or use div elements etc.</p>
</div>
<h3>Collapsible Group Item #5</h3>
<div>
<p>This is section 5. Place your content here in paragraphs or use div elements etc.</p>
</div>
<h3>Collapsible Group Item #6</h3>
<div>
<p>This is section 6. Place your content here in paragraphs or use div elements etc.</p>
</div>
</div>
第二页将通过 Ajax 拉手风琴:
<div id="load-top-five">#load top five accordions into here.</div>
<script>
// would like to combine the functionality to only return the top five.
$('#load-top-five').load('https://www.example.com #main'); // this loads the page but doesn't keep it in the correct format.
$('#load-top-five').find('#main:lt(5)').each(function(){...} // I would like to do some logic like this to only render the top 5.
<script>
解决方案
你可以这样做
在文件 html
<div id="main" class="accordians">
<div class="card-acordeon">
<div id="collapse1">
<h3 class="title">header 1</h3>
</div>
<div class="acordeon" id="acordeon1">
<p>This is section 1. Place your content here in paragraphs or use div elements etc.</p>
</div>
</div>
<div class="card-acordeon">
<div id="collapse2">
<h3 class="title">header 2</h3>
</div>
<div class="acordeon" id="acordeon2">
<p>This is section 2. Place your content here in paragraphs or use div elements etc.</p>
</div>
</div>
<div class="card-acordeon">
<div id="collapse3">
<h3 class="title">header 3</h3>
</div>
<div class="acordeon" id="acordeon3">
<p>This is section 3. Place your content here in paragraphs or use div elements etc.</p>
</div>
</div>
<div class="card-acordeon">
<div id="collapse4">
<h3 class="title">header 4</h3>
</div>
<div class="acordeon" id="acordeon4">
<p>This is section 4. Place your content here in paragraphs or use div elements etc.</p>
</div>
</div>
<div class="card-acordeon">
<div id="collapse5">
<h3 class="title">header 5</h3>
</div>
<div class="acordeon" id="acordeon5">
<p>This is section 5. Place your content here in paragraphs or use div elements etc.</p>
</div>
</div>
<div class="card-acordeon">
<div id="collapse6">
<h3 class="title">header 6</h3>
</div>
<div class="acordeon" id="acordeon6">
<p>This is section 6. Place your content here in paragraphs or use div elements etc.</p>
</div>
</div>
<div class="card-acordeon">
<div id="collapse7">
<h3 class="title">header 7</h3>
</div>
<div class="acordeon" id="acordeon7">
<p>This is section 7. Place your content here in paragraphs or use div elements etc.</p>
</div>
</div>
<div class="card-acordeon">
<div id="collapse8">
<h3 class="title">header 8</h3>
</div>
<div class="acordeon" id="acordeon8">
<p>This is section 8. Place your content here in paragraphs or use div elements etc.</p>
</div>
</div>
</div>
在文件 css
*{
padding: 0;
margin: 0;
}
.accordians{
height: auto;
width: 80%;
padding-top: 4%;
margin: auto;
}
.card-acordeon{
width: 100%;
height: auto;
cursor: pointer;
padding-left: 2%;
padding-top: 1%;
padding-bottom: 1%;
border-bottom: 1px solid rgb(121, 121, 121);
background-color: gray;
}
.card-acordeon div:nth-child(2){
display: none;
}
.card-acordeon:hover{
opacity: 0.9;
}
.title{
color: white;
font-size: 20px;
font-weight: bolder;
height: 100%;
width: 100%;
}
.acordeon{
margin-top: 2%;
padding-left: 1%;
padding-right: 1%;
}
在文件 js
$(document).ready(function () {
console.log("hay "+$(".card-acordeon").length+" div con la clase card-acordeon");
for(var i=0; i<$(".card-acordeon").length; i++){
let pos=i+1;
if(i<5){
$("#acordeon"+pos).css('display','block');
}
$("#collapse"+pos).click(Collapsediv);
}
});
var idbefor=0;
var id=0;
function Collapsediv(){
id=this.id.substring(this.id.length-1,this.id.length);
$("#acordeon"+id).css('display','block');
if(idbefor!=id){
$("#acordeon"+idbefor).css('display','none');
}
else{
$("#acordeon"+id).css('display','block');
}
idbefor=this.id.substring(this.id.length-1,this.id.length);
}
推荐阅读
- realm - 在 Keycloak 中继承/共享用户联合
- python - 在 pandas 的新文章中存储 Tf-idf 矩阵并更新现有矩阵
- json - 来自 SQL Server 上 FOR JSON 的平面 JSON 结果,带有连接查询
- asp.net-core - Asp.Net Core 2.0 跨服务器负载均衡
- c# - C# WinForm 中的 AppDomain.CurrentDomain.GetAssemblies()
- python - 获取您的电子邮件的永久地址
- r - 在 Keras 中实现自定义层(RStudio 界面)
- struts2 - OGNL 表达式注入:Struts 2
- c# - C#如何将字符串列表添加到列表中
- mongodb - Mongodb使用$ position将元素插入数组