单击活动选项卡时手风琴恢复为默认选项卡文本

Question

我有一架可以正常工作的手风琴。我打开了第一个选项卡，其中 .accordion-open 作为活动状态，我的图标（减号）也通过 CSS 正确显示。文本显示为“HIDE”，这也是正确的。由于我在配备 SHOW/HIDE 和 PLUS/MINUS 的手风琴中进行了导航，如果我单击“活动”选项卡，我会按应有的方式关闭它，减号变为加号（这也是我想要），但是 HIDE 不会变回 SHOW。

简而言之，如果有人关闭了打开的选项卡（所有选项卡都将关闭），我希望单击的选项卡的文本恢复为显示。

我还附上了 fiddle。谢谢！

https://jsfiddle.net/EdgarAlexPoe/au7s346h/2/

 jQuery(document).ready(function($) { 
 $.fn.accordion = function() {
    const trigger = $(this).find('.accordion-trigger');
    const collapse = $(this).find('.accordion-collapse');

      $(trigger).first().addClass('accordion-open').find('span.showHide').html('HIDE');
    $(collapse).first().show();

    $(trigger).each(function(){
        $(this).on('click', function(){
            $(this).siblings('.accordion-collapse').slideToggle();
            $(this).toggleClass('accordion-open');
            $(this).parent().siblings('.accordion-item').find('.accordion-trigger').removeClass('accordion-open');
            $(this).parent().siblings('.accordion-item').find('.accordion-collapse').slideUp();
            $(this).find('span.showHide').html('HIDE');
            $(this).parent().siblings('.accordion-item').find('span.showHide').html('Show');

        });

    });
}
 $('.accordion').accordion();
 });

.accordion-item {
    margin: 0 0 1rem;
}

.accordion-item .accordion-trigger {
    color: #fff;
    background: #37847c;
    cursor: pointer;
    padding: 15px;
    position: relative;
    font-weight: 600;
    text-transform: uppercase;
}

.accordion-item .accordion-trigger span.teamTitlestyle {
    font-size: 24px;
    text-transform: capitalize;
    font-weight: 400;
}

.accordion-item .accordion-trigger:hover {
    background: #333;
}

.accordion-item .accordion-trigger:hover::before {
    color: #fff;
}

.accordion-item .accordion-trigger.accordion-open {
    background: #ccc;
}

.accordion-item .accordion-trigger .staff {
    float: right;
    margin: 3px;
}

.accordion-item .accordion-trigger .staff::after {
    font-family: 'Font Awesome 5 Free';
    content: "\f067";
    font-size: 20px;
    color: #fff;
    margin: 0 10px 0 10px;
}

.accordion-item .accordion-trigger.accordion-open .staff::after {
    content: "\f068";
    color: #fff;
}

.accordion-item .accordion-collapse {
    color: #000;
    display: none;
    padding: 15px;
    font-weight: 500;
}

.accordion-item .accordion-collapse .mainContent {
    display: inline-block;
    vertical-align: top;
    width: 67%;
}

.accordion-item .accordion-collapse .accordionSidebar {
    background: #f00;
    text-align: center;
    padding: 2rem;
    display: inline-block;
    width: 25%;
}

.accordion-item .accordion-collapse a {
    color: #ccc;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
    <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-trigger">
                <span class="teamTitlestyle">Team One</span>
                <div class="staff"><span class="showHide">Show</span>
                </div>
            </div>
            <div class="accordion-collapse">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Cras
                semper auctor neque vitae tempus quam pellentesque nec nam.
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-trigger">
                <span class="teamTitlestyle">Team TWO</span>
                <div class="staff"><span class="showHide">Show</span>
                </div>
            </div>
            <div class="accordion-collapse">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Cras
                semper auctor neque vitae tempus quam pellentesque nec nam.
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-trigger">
                <span class="teamTitlestyle">Team THREE</span>
                <div class="staff"><span class="showHide">Show</span>
                </div>
            </div>
            <div class="accordion-collapse">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Cras
                semper auctor neque vitae tempus quam pellentesque nec nam.
            </div>
        </div>
    </div>
</div>

Answer 1

就您的代码而言，我想您需要执行以下操作：

打开accordion
点击 accordion-item 时：
- 显示其内容，文本 Show -> Hide 反之亦然。
- 单击accordion-item时，将关闭所有其他元素。

这是我的建议：

要将事件添加到 accordion-item 元素，您不需要使用 $.each()。我这样更改了您的代码：

jQuery(document).ready(function ($) {
    $.fn.accordion = function () {
        const trigger = $(this).find('.accordion-trigger');
        const collapse = $(this).find('.accordion-collapse');

        // show first accordion element
        $(trigger).first().addClass('accordion-open').find('span.showHide').html('HIDE');
        $(collapse).first().show();

        // add event click on all accordion item
        trigger.click(function () {
            const currentAccordionItem = $(this).parent()
            currentAccordionItem.find('.accordion-collapse').slideToggle();
            $(this).toggleClass('accordion-open');

            const isOpened = $(this).hasClass('accordion-open')
            $(this).find('.staff').html(isOpened ? 'Hide' : 'Show')

            // hide another accordion item
            const anotherAccordionItem = currentAccordionItem.parent().find('.accordion-item').not(currentAccordionItem)
            console.log(anotherAccordionItem);
            anotherAccordionItem.find('.accordion-trigger').removeClass('accordion-open')
            anotherAccordionItem.find('.accordion-trigger').find('.staff').html('Show')
            anotherAccordionItem.find('.accordion-collapse').slideUp()
        })
    }
    $('.accordion').accordion();
});

完整代码here

单击活动选项卡时手风琴恢复为默认选项卡文本

Accordion Revert to Default Tab Text When Active Tab is Clicked

html

javascript

css

jquery

accordion