jquery - 单击时更改 Accordion 箭头方向

Question

我有带箭头的 Accordion 。要实现的目标是当事件 Accordion 滑落时更改 div 类。我唯一的结果是 - 将所有 div 类从向下箭头更改为向上箭头。如何更改为仅事件？

https://codepen.io/anon/pen/aygeyj

$('.accordion-item').click(function(e) {
    e.preventDefault();

    var $this = $(this);
    var $arrow = $('.accordion-arrow');

    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});

Answer 1

您可以简单地使用 toggleClass为了从 Accordion 向下更改为 Accordion 向上:

$(this).find('.accordion-arrow').toggleClass('accordion-down accordion-up');

您需要在末尾添加上一行:

$('.accordion-item').click(function(e) {

事件处理程序。

$('.accordion-item').click(function(e) {
    e.preventDefault();

    var $this = $(this);
    var $arrow = $('.accordion-arrow');

    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
    //
    // added next line
    //
    $(this).find('.accordion-arrow').toggleClass('accordion-down accordion-up');
});

li {
    display: block;
}
.accordion {
    width: 957px;
    margin: 0 auto;
}
.accordion .accordion-item {
    background: #ebeeee;
    display: block;
    height: 75px;
    font-size: 24px;
    text-align: left;
    padding-left: 72px;
    -webkit-box-shadow: 0px 5px 5px 0px #c0c0c0;
    -moz-box-shadow: 0px 5px 5px 0px #c0c0c0;
    box-shadow: 0px 5px 5px 0px #c0c0c0;
    margin-bottom: 1.5px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}
.accordion .inner {
    display: none;
    background: #f1f6f6;
    padding-left: 72px;
    text-align: left;
    padding-top: 17px;
    padding-bottom: 17px;
    -webkit-box-shadow: 0px 5px 5px 0px #c0c0c0;
    -moz-box-shadow: 0px 5px 5px 0px #c0c0c0;
    box-shadow: 0px 5px 5px 0px #c0c0c0;
    margin-bottom: 1.5px;
}
.accordion .accordion-arrow {
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    margin-left: 600px;
    margin-top: 6px;
}
.accordion .accordion-down {
    border-top: 11px solid #74cde8;
}
.accordion .accordion-up {
    border-bottom: 11px solid #74cde8;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>

<ul class="accordion">
    <li>
        <a class="accordion-item"   href="javascript:void(0);">accordion item1
            <div class="accordion-arrow accordion-down"></div>
        </a>
        <div class="inner">
            <p class="accordion-text">some text1</p>

        </div>
    </li>

    <li>
        <a class="accordion-item" href="javascript:void(0);">accordion item2
            <div class="accordion-arrow accordion-down"></div>
        </a>

        <div class="inner">
            <p class="accordion-text">some text2</p>
        </div>
    </li>

    <li>
        <a class="accordion-item"   href="javascript:void(0);">accordion item3
            <div class="accordion-arrow accordion-down"></div>
        </a>
        <div class="inner">
            <p class="accordion-text">some text3</p>

        </div>
    </li>
    <li>
        <a class="accordion-item"   href="javascript:void(0);">accordion item4
            <div class="accordion-arrow accordion-down"></div>
        </a>
        <div class="inner">
            <p class="accordion-text">some text4</p>

        </div>
    </li>
</ul>