Не удается отложить анимацию выпадающего Bootstrap, когда активен другой

Question

Я создаю сайт Bootstrap с нуля и столкнулся с проблемой, когда я не могу отложить анимацию выпадающего меню, если открывается другой выпадающий список. У меня есть меню боковой панели слева с расширяемыми подменю с правой стороны с анимацией slideUp и slideDown, и оно работает нормально, хотя подменю перекрываются из-за анимации в одно и то же время. Я хотел отложить открытие выпадающего меню, если активен какой-либо другой.

Я попробовал почти все варианты, которые я мог себе представить, например, найти все элементы ('*' или это) с помощью класса .show или найти элементы с атрибутами aria-extended === true. Я потратил на это около 4 часов, и это меня бесило. Если честно, я новичок, поэтому я мог что-то пропустить, и, возможно, вы, ребята, знаете какое-нибудь решение для этого. Я включил код, который фактически начал работать (вроде) с событием show.bs.dropdown, но кажется, что .delay (1000) портит весь функционал выпадающего меню. Иногда это задерживается, иногда нет анимации, выпадающий просто всплывает.

if ($('.dropdown').on('shown.bs.dropdown')) {
    $('.dropdown').on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).delay(1000).slideDown();
  });
} else {
    $('.dropdown').on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-display="static" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-paint-brush"></i>Grafika</a>

Спасибо за любую помощь;)