javascript - 我如何让按钮折叠该部分？

Question

现在我在我网页上的几个地方使用这个 Accordion 按钮。目前，当它打开时，如果您单击 Accordion 内的任何地方，它就会折叠。我想让 Accordion 的顶部，实际上是按钮部分折叠起来，这样我就可以在 Accordion 内容中添加链接和其他内容。 https://jsfiddle.net/nc4euge3/

这是一些代码，因为没有它就无法链接到 js fiddle :

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-button">
            <h3>
            <div class="accordion-marker"><i class="fa fa-plus"></i></div><span class="question">Thing #1</span>
        </h3>
    </div>
    <p>
        text text text text text text text
        text text text text text text text
        text text text text text text text
        text text text text text text text
        text text text text text text text
        text text text text text text text
        text text text text text text text
        text text text text text text text
    </p>
</div>

Answer 1

您需要在那里进行一些小的调整 - 聆听按钮的点击，而不是整个 Accordion 元素。

查看演示 - https://fiddle.jshell.net/ermakovnikolay/nc4euge3/2/

$(document).ready(function () {
    var $accordion = $('.accordion .accordion-item');
    $('.accordion-button').click(function () { /* change to the button */
        var $this = $(this).parent();  /* update to get the accordion item container */
        if ($this.hasClass('active')) {
            $this.removeClass('active').find('i').removeClass('fa-minus').addClass('fa-plus');
        } else {
            $accordion.removeClass('active');
            $this.addClass('active');
            $accordion.find('i').removeClass('fa-minus').addClass('fa-plus');
            $this.find('i').addClass('fa-minus')
        }
    });
});