Question

我一直在研究一种相对简单的手风琴，它没有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>

这是我的手风琴片段：

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

十岁的首发。我放弃了所有的＆＃39; $＆＃39;因为那是所有默认的jQuery调用。

然后我看看用Vanilla JavaScript替换所有jQuery特定的调用。所以没有.hide（）,. find（），。prev（），。slideUp（）等等。因为所有这些都适用于jQuery。

可能更容易找到一个简单的香草JavaScript手风琴并从那里开始工作。

简单的移动javascript手风琴

1 个答案: