Javascript-форум - Корректное переключение dropdown

Значся чего хочется добиться. Есть дропдаун'ы. 1 открыли, другие все закрылись. Нажали вне открытого дропдауна - закрылся.

HTML:

<li class="dropdown-show"><a class="main-menu-item show-drop" data-drop="learn" href="#">Учебник <span class="icon-down-open-mini"></span></a>
                            <ul class="list-unstyled drop-menu" id="learn">
                                <li><a class="drop-item" href="#">Видео лекции и вебинары</a></li>
                                <li><a class="drop-item" href="#">Для чтения</a></li>
                                <li><a class="drop-item" href="#">Онлайн-поддержка</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-show"><a class="main-menu-item show-drop" data-drop="update" href="#">Обновления <span class="icon-down-open-mini"></span></a>
                            <ul class="list-unstyled drop-menu" id="update">
                                <li><a class="drop-item" href="#">Системные</a></li>
                                <li><a class="drop-item" href="#">Обновление по модулям</a></li>
                                <li><a class="drop-item" href="#">Обновление по документам</a></li>
                            </ul>
                        </li>

Открываю нужный мне dropdown вот так:

$('.show-drop').click(function(){
            var id = $(this).data('drop');
            $('#'+id).fadeIn();
        })

Я понимаю, что для закрывания нужно оперировать через $(document) + e.target, но чет допереть не могу, как корректно построить логику. Помогите пж

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .drop-menu { display: none; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> let prev; $(document).click(function(event) { let li = $(event.target).closest(".dropdown-show"); if (li.length) { let a = $(event.target).closest(".show-drop") if (a.length) { let menu = a.next(); if (prev && menu[0] !== prev) $(prev).fadeOut(); a.next().fadeToggle(); prev = menu[0] } } else if (prev) $(prev).fadeOut(); }); </script> </head> <body> <li class="dropdown-show"><a class="main-menu-item show-drop" data-drop="learn" href="#">Учебник <span class="icon-down-open-mini"></span></a> <ul class="list-unstyled drop-menu" id="learn"> <li><a class="drop-item" href="#">Видео лекции и вебинары</a></li> <li><a class="drop-item" href="#">Для чтения</a></li> <li><a class="drop-item" href="#">Онлайн-поддержка</a></li> </ul> </li> <li class="dropdown-show"><a class="main-menu-item show-drop" data-drop="update" href="#">Обновления <span class="icon-down-open-mini"></span></a> <ul class="list-unstyled drop-menu" id="update"> <li><a class="drop-item" href="#">Системные</a></li> <li><a class="drop-item" href="#">Обновление по модулям</a></li> <li><a class="drop-item" href="#">Обновление по документам</a></li> </ul> </li> </body> </html>