Question

现在我在我的网页上的几个地方使用这个手风琴按钮。目前，当它打开时，如果你点击手风琴内的任何地方，它就会崩溃。我想做到这一点，只有手风琴的顶部，实际的按钮部分，折叠它，以便我可以添加链接和其他东西到手风琴内容。 https://jsfiddle.net/nc4euge3/

这是一些代码，因为它无法在没有它的情况下链接到js：

    <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

你需要进行一些小调整 - 听点击按钮，而不是整个手风琴项目。

检查演示 - 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')
        }
    });
});

如何让按钮折叠部分？

1 个答案: