How can I collapse child items in hover sidebar in Vuetify?

Question

I have sidebar in my project. When I hover over each sidebar with the mouse, the sidebar opens here, everything is fine, but inside the sidebar I have a collapse dropdown menu. When I open this menu, it opens, but when I move the mouse away from the sidebar and move the mouse over the sidebar again, collapse remains open. You will understand it more clearly in the screenshots.What I want is that the space does not appear between the icons when the sidebar is closed.

Template sidebar

<v-navigation-drawer width="320" :disable-resize-watcher="true">
      <v-list v-if="userRole == 'Distributor' || isSuper">
        <v-list-tile
          :append="true"
          v-for="(item, index) in distMenu"
          :key="index"
          :class="{
            'active-sidebar-item': item.href.includes(activeLinkRef),
          }"
          style="margin-bottom: 5px;"
        >
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>
              <router-link :to="item.href">{{
                item.title
              }}</router-link></v-list-tile-title
            >
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
      <v-list v-if="userRole == 'Sysadmin' && !isSuper">
        <v-list-tile
          :append="true"
          v-for="(item, index) in sysMenu"
          :key="index"
          :class="{
            'active-sidebar-item': item.href.includes(activeLinkRef),
          }"
          style="margin-bottom: 5px;"
        >
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>
              <router-link :to="item.href">{{
                item.title
              }}</router-link></v-list-tile-title
            >
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
      <v-list v-if="userRole != 'Distributor' || isSuper">
        <v-list-tile
          :append="true"
          v-for="(item, index) in menu"
          :key="index"
          :class="{
            'active-sidebar-item': item.href.includes(activeLinkRef),
          }"
          style="margin-bottom: 5px;"
        >
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>
            <router-link :to="item.href">{{ item.title }}</router-link>
          </v-list-tile-title>
        </v-list-tile>
        <Facilities
          :facilities="facilities"
          v-if="
            (userRole.toLowerCase() != 'distributor' && hasCompany) ||
              isSuper
          "
          :activeLinkRef="activeLinkRef"
        ></Facilities>
      </v-list>
    </v-navigation-drawer>

Facilities.vue

  <v-list-group
      prepend-icon="business"
      :value="false"
      v-for="(facility, index) in facilities"
      :key="index"
      :class="{
        'active-sidebar-item':
          activeLinkRef[0] == 'facility' && activeLinkRef[1] == facility.id,
      }"
      style="margin-bottom: 5px"
    >
      <template v-slot:activator>
        <v-list-tile :append="true">
          <router-link :to="'/facility/' + facility.id">{{
            facility.name
          }}</router-link>
        </v-list-tile>
      </template>
      <systems
        :systems="facility.systems.length > 0 ? facility.systems : []"
        :facility="facility.id"
        :activeLinkRef="activeLinkRef"
      ></systems>
    </v-list-group>
    <v-list-tile
      class="input-list-tile"
      v-if="isSuper || userRole.toLowerCase() == 'sysadmin'"
    >
      <v-list-tile-title
        style="padding-left: 54px; height: 40px"
        class="input-option"
      >
        <!-- <input
          style="border: 1px solid #dedede"
          type="text"
          name="add-facility"
          id="add-facility"
          :placeholder="$t('sidebar.addFacility')"
          @keyup.enter="addFacility"
        /> -->
        <b-form-input
          size="sm"
          style="border: 1px solid #dedede"
          class="w-100"
          name="add-facility"
          id="add-facility"
          :placeholder="$t('sidebar.addFacility')"
          @keyup.enter="addFacility"
        ></b-form-input>
      </v-list-tile-title>
      <v-list-tile-action style="justify-content: right;">
        <v-icon @click="addFacility">add</v-icon>
      </v-list-tile-action>
    </v-list-tile>

when the mouse is not over the sidebar

When I open the sidebar, everything is fine so far.

When I move the mouse away from the sidebar, the sidebar closes and this image appears

Answer 1

First your collapse menus to display none.

Create a class, for example:

.display-item {
   display: block;
}

as for the on click try this Jquery code:

$("put the drop down class here").click(function(){
  $("put your tage here").toggleClass("display-item");
});