Ajax jQuery Accordion 在页面上显示前 5 个元素

Question

我想做的是 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>

Answer 1

你可以这样做

在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);
    }

Answer 2

首先，您必须将元素加载到页面上。手风琴只会在数据加载完成后格式化。

$(function() {
    $('#load-into-new-accordion').load('https://www.someurl.com #accordion_data');
});

// create a function for the accordion.
function loadAccordionFormating() {
  $('#load-into-new-accordion').accordion({});
}

// after the data is done loading apply the formatting.
window.onload = function() {
   loadAccordionFormating();
};

要隐藏元素，您可以使用 ui-id-1、ui-id-2 等，您只需创建一个简单的 for 循环即可。

for(var i=1;i<15; i++) {
    $(`ui-id-${i}`).hide();
}

此外，由于这很慢，您还可以默认使用 css 隐藏元素，并使用与上述相同的方法显示它们。