javascript - 切换关闭除单击的一项之外的所有内容

Question

我试图让这个切换正常工作，我遇到的问题是，如果我单击它显示打开的链接，如果我转到下一部分并单击该链接，然后显示打开，所以我有两个文本当仅应单击时显示打开。

我看过Toggle/close all other divs when one is clicked和其他一些帖子，但似乎无法让它发挥作用。

正如您在代码块中所看到的，文本在打开/关闭之间切换，但最终可能会显示它们都显示“打开”。

$(document).ready(function () {
    $('.hidden').removeClass('hidden').hide();
    $('.accordian-toggle').click(function (e) {
    e.preventDefault();
        $(this).find('span').each(function () { $(this).toggle(); });
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <section id="process">
        <div class="container">
            <div class="row">
                <div class="col text-center">
                    <div class="inline-block-container">
                        <h1 class="text-center text-md-left">Process<br></h1>
                        <hr class="header-underline">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-md-6 col-lg-6">
                    <article class="text-center">
                        <header></header>
                        <section></section>
                    </article>
                    <p>Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6">
                    <article class="text-center">
                        <header></header>
                        <section></section>
                    </article>
                    <div role="tablist" id="accordion-1">
                        <div class="card">
                            <div class="card-header" role="tab">
                                <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="true" aria-controls="accordion-1 .item-1" href="div#accordion-1 .item-1" class="accordian-toggle">
                               <span class="hidden"><i class="fas fa-door-open i-margin">OPen</i></span><span><i class="fas fa-door-closed i-margin">Close</i></span></a></h5>
                            </div>
                            <div class="collapse show item-1" role="tabpanel" data-parent="#accordion-1">
                                <div class="card-body">
                                    <p class="card-text">Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" role="tab">
                                <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-2" href="div#accordion-1 .item-2" class="accordian-toggle"><span class="hidden"><i class="fas fa-door-open i-margin">OPen</i></span><span><i class="fas fa-door-closed i-margin">Close</i></span></a></h5>
                            </div>
                            <div class="collapse item-2" role="tabpanel" data-parent="#accordion-1">
                                <div class="card-body">
                                    <p class="card-text">Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" role="tab">
                                <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-3" href="div#accordion-1 .item-3" class="accordian-toggle"><span class="hidden"><i class="fas fa-door-open i-margin">Opne</i></span><span><i class="fas fa-door-closed i-margin">Close</i></span></a></h5>
                            </div>
                            <div class="collapse item-3" role="tabpanel" data-parent="#accordion-1">
                                <div class="card-body">
                                    <p class="card-text">Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" role="tab">
                                <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-4" href="div#accordion-1 .item-4" class="accordian-toggle"><span class="hidden"><i class="fas fa-door-open i-margin">Open</i></span><span><i class="fas fa-door-closed i-margin">Close</i></span></a></h5>
                            </div>
                            <div class="collapse item-4" role="tabpanel" data-parent="#accordion-1">
                                <div class="card-body">
                                    <p class="card-text"Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 1

请找到适合您的 Accordion 的有效 jquery 代码。

<script type="text/javascript">
$(function() {
    $('.hidden').removeClass('hidden').hide();
    $('.accordian-toggle').click(function (e) {
    e.preventDefault();
    var closedEl;
    var openEl; 
    $('.card').each(function(){
        openEl = $(this).find('.accordian-toggle').find('span').find('i.fa-door-open');
        closedEl = $(this).find('.accordian-toggle').find('span').find('i.fa-door-closed');
        $(closedEl).parent('span').show();
        $(openEl).parent('span').hide();
    });
    $(this).find('span').find('i.fa-door-open').parent('span').show();
    $(this).find('span').find('i.fa-door-closed').parent('span').hide();
    });
})
</script>