javascript - 简单的移动javascript Accordion

Question

我一直在研究一个相对简单的 Accordion ，它没有 jQuery 和 jQuery UI 的过时软件，我可以在所有类型的场合重复使用它。但我只是遇到了障碍。我不知道如何将它应用到我目前的情况，即 - 我希望能够点击 <section>元素，以便它可以覆盖更大的触摸区域，但我现在所能做的就是无法到达我想去的地方。

标记:

<article id="services">
    Some content
    <div class="flex">
        <section>
            <img src="image.jpg" alt="some image"/>
            <h3 class="accordion-toggle">Title</h3>
            <div class="accordion-content">
                <p>Lorem ipsum dolor</p>
            </div>
        </section>
    </div>
</article>

这是我的 Accordion 片段:

function accordionMobile() {
    if ($(window).width() < 720) {
        var aBtn = $(".accordion-toggle");
        var aCont = $(".accordion-content");

        $(document).ready(function($) {
            aBtn.addClass('accordionButton');
            aCont.addClass('accordionContent');
            aCont.hide();
            $('#services').find('.accordion-toggle').click(function() {

                //Expand or collapse this panel
                $(this).find('div').slideToggle('fast');

                //Hide the other panels
                aCont.not($(this).prev()).slideUp('fast');
            });
        });

    } else {
        aBtn.removeClass('accordionButton');
        aCont.removeClass('accordionCont');
    }
}
accordionMobile();

这是一个 fiddle.

Answer 1

好吧，十人份的开胃菜。我会删除所有的“$”，因为这是所有默认的 jQuery 调用。

然后我会考虑用 Vanilla JavaScript 替换所有 jQuery 特定调用。所以没有 .hide()、.find()、.prev()、.slideUp() 等。因为所有这些都适用于 jQuery。

寻找一个普通的 JavaScript Accordion 并从那里开始工作可能会更容易。