Question

我不想使用jQuery UI，因为它会给客户端的混乱项目增加另一个依赖。

由于这些限制，我写了一个简单的jQuery手风琴。一些用户在操作功能时报告尺寸不正确。他们做了与我数十次相同的事情：用手风琴导航到页面，手风琴作为标准打开第一个内容部分。从那里，他们单击以展开/折叠所有按钮，最终在其中一个按钮上的大小设置不正确，因为该选项卡不会完全折叠，并使所包含的图像和文本部分可见。

如果有人分享为什么会这样，那将是很棒的。我无法在Windows 10上使用Chrome重新创建该问题，报告该问题的用户正在Mac上运行Chrome。

const acc = $('.accordion_trigger');
    for (let i = 0; i < acc.length; i += 1) {
        acc[0].nextElementSibling.classList.add('active');
        if (acc[0].nextElementSibling.classList.contains('active')) {
            acc[0].lastElementChild.classList.replace(
                'fa-chevron-down',
                'fa-chevron-up'
            );
            acc[0].nextElementSibling.style.maxHeight =
                acc[0].nextElementSibling.scrollHeight + 'px';
        }

        $(acc[i]).on('click', function() {
            acc.filter(item => item != this);
            let panel = this.nextElementSibling;
            panel.classList.toggle('active');

            let chevron = document.createElement('i');
            chevron.classList.add('fas', 'fa-chevron-up');
            this.replaceChild(chevron, this.querySelector('i'));

            if (!panel.classList.contains('active')) {
                chevron.classList.replace('fa-chevron-up', 'fa-chevron-down');
            }

            if (panel.style.maxHeight) {
                panel.style.maxHeight = null;
            } else {
                panel.style.maxHeight = panel.scrollHeight + 'px';
            }
        });
    }

以下是HTML内容，我删除了一些不相关的php代码

<div class="accordion">
    <ul class="accordion_ul">
        <li class="accordion_trigger">
            <h5>Title</h5>
            <i class="fas fa-chevron-down"></i>
        </li>
        <div class="panel">
            **Dynamic Content**
        </div>
    </ul>
</div>

如何每次正确扩展/折叠jQuery手风琴？

0 个答案: