Я просто хочу спросить:
- как сделать развязку раскрывающегося меню при активном раскрывающемся меню?
- Когда мышь наводится на боковую панель, активный выпадающий список меню снова расширилось?
я думаю, мне просто интересно использовать hover, но он не работает, когда я пытаюсь, поэтому я надеюсь, что кто-то может помочь мне решить эту проблему?
Простая концепция, я просто want:
- Мышь: при наведении курсора на иконку боковой панели / щелчок по бургеру => расширенная боковая панель => список меню с: подменю нажал => отображается выпадающее меню => mouseOut from sidebar => icon is-collapsed
- Мышь: снова наведите курсор на иконку боковой панели / 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>