时间戳

首页 > 解决方案 > 失去焦点时自动折叠侧边栏菜单列表

javascript - 失去焦点时自动折叠侧边栏菜单列表

问题描述

我只想问：

  1. 当下拉菜单处于活动状态时，如何使下拉菜单折叠？
  2. 当鼠标悬停到侧边栏时，活动下拉菜单再次展开？

我想我只是想知道使用悬停但是当我尝试它时它不起作用，所以我希望有人可以帮助我解决这个问题？

我想要的简单概念：

  1. 鼠标：鼠标悬停到侧边栏图标/汉堡被点击 => 侧边栏展开 => 菜单列表具有：子菜单点击 => 下拉菜单显示 => mouseOut 从侧边栏 => 图标被折叠
  2. Mouse:hover to sidebar-icon again / 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>

在此处输入图像描述

标签： javascriptjqueryweb

解决方案

在纯 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 事件，它们的工作方式也有点像 :hover。

推荐阅读