Скрипт не работает на айфонах

$(document).ready(function() { 
 
    $('body').on('click', '.icon-angle-down', function() { //<- попробуйте так 
 
        $(this).toggleClass('active'); 
        $(this) 
            .parents('.item.parent') 
            .toggleClass('active'); 
        $(this) 
            .siblings('.sub-menu') 
            .toggleClass('open'); 
 
    }) 
 
});

.icon-angle-down{cursor:pointer} 
.active{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="icon-angle-down">1</div>

Фокус в том, что ребята в Эппл страшно заморочены на accessibility. Поэтому в сафари клик обработчики не работают на элементах, которые семантически не кликабельны. Так что если ваш .icon-angle-down элемент - это, например, div или span, то клик не отработает.

Есть несколько вариантов решить проблему:

1) Самый прямой: Поменять элемент с классом .icon-angle-down на кликабельный <a> или <button>.

2) Css хак: нужному элементу задать cursor: pointer, тогда клик обработчики срабатывают. Не проверял я его давно, может уже не работать.

3) Помимо click обработчика добавить onTouchEnd, он будет срабатывать в мобильном сафари. Но иметь два обработчика с одинаковым поведением чревато багами и двойным срабатыванием.

Надеюсь, поможет.