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

请为您的手风琴找到有效的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>

切换关闭所有内容，但单击除外

1 个答案: