1

Привет всем! Есть раскрывающийся список, со стрелочкой справа, которая должна изменяться в зависимости от раскрыт список или свернут.

введите сюда описание изображения

Когда его раскрываю, то стрелочка ведет себе как надо, смотрит вниз.

введите сюда описание изображения

Но при повторном сворачивании списка, стрелка так и смотрит вниз, не изменяется. А должна смотреть вверх. Делаю это вот так:

$('.list_title').click( function() {
  $('.list_content').slideToggle() 
  $('.listBgArr').addClass('uppArrow');
});

То есть когда кликаю на list_title, раскрывается список и к стрелке добавляется класс uppArrow, который в css меняет background-position у css-спрайта стрелки. Может кто-то поможет почему так происходит?

2
  • 4
    toggleClass вместо addClass
    – Oleksandr
    22 сен 2017 в 7:01
  • @Oleksandr, блин. А я мучился почти сутки. Спасибо буду знать. Ставлю палец вверх.
    – user229151
    22 сен 2017 в 7:06

2 ответа 2

2

Комментарий от @Oleksandr решил вопрос - toggleClass вместо addClass.

0

Небольшая альтернатива:

CSS:

.usefull-links:hover{cursor: pointer;}
.usefull-links{position: relative;background-color: #5dcef9;padding: 5px 10px;border-radius: 5px;}
i.flaticon-down-arrow{position: absolute;right: 15px;bottom: 0px;}
.links{display: none;position: absolute;}
.links a{display: block;}
.info-div{position: relative;padding-top: 20px;}
.info-div i{transition: ease all 0.5s;}
.info-div .active i{transform: rotate(180deg);}

HTML:

        <div class="col-lg-4 info-div">
            <div class="usefull-links">Usefull links<i class="flaticon-down-arrow"></i></div>
            <div class="links">
                <a href="https://jquery.com/download/" target="_blank">Get jQuery</a>
                <a href="https://getbootstrap.com/docs/3.3/getting-started/" target="_blank">Get bootstrap</a>
            </div>
        </div>          

JS:

$('.usefull-links').bind('click', function(){
    $(this).toggleClass('active');
    $('.links').slideToggle();
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.