用jQuery改变手风琴中的图标

时间:2017-01-16 12:40:05

标签: javascript jquery html accordion

如果打开该dd,如何将箭头向下图标(picture1)更改为向上箭头图标(picture2)。如果单击另一个技能栏并打开其他一些dd(第一个自动关闭),则第一个图标应更改回箭头。这是箭头向上图标的类:ion-arrow-up-b。

HTML code:

<div class="containers-right">
    <dl class="accordion">
        <dt>
            <i class="ion-arrow-down-b"></i>
            <div class="skill-container desktop">  
                <div class="skill learning"></div> 
            </div>
        </dt>
        <dd>
            <p class="accordion-text">Info about Learning skill</p>
        </dd>
        <dt>
            <i class="ion-arrow-down-b"></i>
            <div class="skill-container desktop"> 
                <div class="skill organization">
                </div> 
            </div>
        </dt>
        <dd>
            <p class="accordion-text">Info about Organization skill</p>
        </dd>
        <dt>
            <i class="ion-arrow-down-b"></i>
            <div class="skill-container desktop"> 
                <div class="skill creativity"></div> 
            </div>
        </dt>
        <dd>
            <p class="accordion-text">Info about Creativity skill</p>
        </dd>
        <dt>
            <i class="ion-arrow-down-b"></i>
            <div class="skill-container desktop"> 
                <div class="skill communication"></div> 
            </div>
        </dt>
        <dd>
            <p class="accordion-text">Info about Communication skill</p>
        </dd>
        <dt>
            <i class="ion-arrow-down-b"></i>
            <div class="skill-container desktop"> 
                <div class="skill teamwork"></div> 
            </div>
        </dt>
        <dd>
            <p class="accordion-text">Info about Teamwork skill</p>
        </dd>
    </dl>
</div>

CSS代码:

.accordion{
    width: 10em;
    margin-right: 0;
}
.accordion,
.accordion dt{
    margin: 0;
    padding: 0;
}
.accordion dd{
    margin: -0.55em 0 0.55em 0;
}

dt{
    display: flex;
    cursor: pointer;
}

.accordion-container{ text-align: left; }

.accordion-text{
    font-size: 0.7em;
    color: #4f285f;
    padding: 0.5em 0 0.2em 0.5em;
}

.ion-arrow-down-b,
.ion-arrow-up-b{
    color: #6a6868;
    margin-left: -1em;
    margin-right: 0.5em;
    margin-top: -0.35em;
}

jQuery代码:

var accordion = $('.accordion');

accordion.find('dd').hide();

accordion.find('dt').on('click', function(){
    $(this).toggleClass('open').next('dd').slideToggle().siblings('dd:visible').slideUp().prev('dt').removeClass('open');     
});

0 个答案:

没有答案