Как скрывать подменю при сворачивании основного меню?

Question

[maiskiykot]

Понадобилось простейшее подменю на ul li. Все нормально работает, но общее меню сворачиваемок и видными остаются только иконки . Однако подменю пытается вылазить при наведении на сложенную иконку. Получается уродство полное. Отсюда вопрос: как скрыть подменю при сворачивании, чтобы клик отрабатывался только на раскрытом меню? Сворачивание происходит по кнопке data-toggle -controls="main-menu"

<div id="main-menu" class="main-menu collapse navbar-collapse">
  <ul class="nav navbar-nav">
                
                 <li class="active">
                     <a href="{{url('dashboard')}}" title="{{__('messages.dashboard')}}"> <i class="menu-icon fa fa-dashboard"></i>{{__('messages.dashboard')}} </a>
                  </li>
                  <li class="active parent"><a href="{{URL::to('messages')}}" title="{{__('messages.messages')}}"> <i class="menu-icon fa fa-envelope-open-o"></i> {{__('messages.messages')}} @include('admin.messenger.unread-count')</a>
                 <ul class="sub-menu"> 
                <li><a href="{{URL::to('messages/create')}}">New Message</a></li>
                 </ul>
                 </li>                 
                 <li class="active">...

Comments

[FrelFrloich]

Пропишите в условии если это не та кнопочка или не тот блок и тд

const headerBurger = document.querySelector('.header-burger')

&& ! headerBurger