Автоматическое сворачивание списка меню боковой панели при потере фокуса - PullRequest
1 голос
/ 26 февраля 2020

Я просто хочу спросить:

  1. как сделать развязку раскрывающегося меню при активном раскрывающемся меню?
  2. Когда мышь наводится на боковую панель, активный выпадающий список меню снова расширилось?

я думаю, мне просто интересно использовать hover, но он не работает, когда я пытаюсь, поэтому я надеюсь, что кто-то может помочь мне решить эту проблему?

Простая концепция, я просто want:

  1. Мышь: при наведении курсора на иконку боковой панели / щелчок по бургеру => расширенная боковая панель => список меню с: подменю нажал => отображается выпадающее меню => mouseOut from sidebar => icon is-collapsed
  2. Мышь: снова наведите курсор на иконку боковой панели / sidebar: state (active) => раскрывающееся меню уже раскрыто

ну, я не знаю, что вы понимаете мой вопрос или что-то ... но я надеюсь, что вы можете сделать это меню автоматического свертывания

$(document).ready(function() {

  // Sidebar links
  $('.sidebar .side-list li a').on('click', function() {
    const $this = $(this);

    if ($this.parent().hasClass('buka')) {
      $this
        .parent()
        .children('.dropdown-menu')
        .slideUp(200, () => {
          $this.parent().removeClass('buka');
        });
    } else {

      $this
        .parent()
        .parent()
        .children('li.buka')
        .children('.dropdown-menu')
        .slideUp(200);

      $this
        .parent()
        .parent()
        .children('li.buka')
        .children('a')
        .removeClass('buka');

      $this
        .parent()
        .parent()
        .children('li.buka')
        .removeClass('buka');

      $this
        .parent()
        .children('.dropdown-menu')
        .slideDown(200, () => {
          $this.parent().addClass('buka');
        });
    }
  });

  // ٍSidebar Toggle
  $('.burger').on('click', e => {
    $('.konten').toggleClass('k-kebuka');
    $('.sidebar').toggleClass('s-kebuka');
    e.preventDefault();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" class="sidebar bg-cerah">
  <div class="sidebar-dalem">
    <div class="side-konten">
      <ul class="side-list">
        <li class="side-item dropdown">
          <a class="dropdown-toggle" href="javascript:void(0)">
            <span class="side-ikon">ICON</span>
            <span class="side-judul">MENU</span>
            <span class="panah">[>]</span>
          </a>

          <ul class="dropdown-menu">
            <li>
              <a href="javascript:void(0)">SUBMENU #1</a>
            </li>
            <li>
              <a href="javascript:void(0)">SUBMENU #2</a>
            </li>
          </ul>
        </li>
        <li class="side-item dropdown">
          <a class="dropdown-toggle" href="javascript:void(0)">
            <span class="side-ikon">[X]</span>
            <span class="side-judul">MENU #2</span>
            <span class="panah">[>] ></span>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="javascript:void(0)">SUBMENU #1</a>
            </li>
            <li>
              <a href="javascript:void(0)">SUBMENU #2</a>
            </li>
          </ul>
        </li>
        <li class="side-item">
          <a class="side-link" href="javascript:void(0)">
            <span class="side-ikon">[X]</span>
            <span class="side-judul">MENU #3</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div id="konten" class="konten">
  <div class="konten-navbar sticky-top">
    <ul class="navbar-kiri">
      <li>
        <a id="burger" href="javascript:void(0)" class="burger">BURGER ICO</a>
      </li>
      <li>
        <a href="#">SEARCH ICO</a>
      </li>
    </ul>
  </div>
</div>

enter image description here

1 Ответ

0 голосов
/ 26 февраля 2020

В чистом CSS, .menu: hover определенно работает, но вы должны построить все меню внутри элемента, имеющего псевдокласс: hover, а также касание или перекрытие:

.popup {
position: relative;
}
button {
width: 8em;
height: 40px;
}

ul {
  position: absolute;
  top: 36px;
  left: 8px;
  background: #eee;
  border: 1px solid black;
  display: none;
  margin: 0;
  width: 14em;
  min-height: 8em;
  padding: 0.5em;
  list-style: none;
}
.popup:hover ul {
  display: block;
}
<div>
  <div class="popup"><button>Menu</button>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </div>
</div>

Конечно, вам нужно все правильно оформить.

Мне также кажется, что я помню, что JQuery имеет события OnMouseEnter и OnMouseLeave, которые работа вроде как: зависать тоже.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...