Question

我正在努力在我的主页上制作侧边栏，就像google冒险（this question）。但我得到的问题是，当我点击侧栏中的任何菜单项时，侧栏会崩溃，但菜单项的文本仍然存在。我想保持侧边栏打开，直到鼠标光标位于侧边栏区域（即使用户点击任何菜单，它应该保持打开/消耗），但是当菜单项的文本保留在空气。我不知道如何解决这个问题，因为我对css和设计没有多少动手。

这是我的jquery代码，用于添加用于折叠/扩展侧栏的类

$('[data-toggle="offcanvas"]').mouseenter(function(e) {
    e.preventDefault();
    if ($("body").hasClass('sidebar-collapse')) {
        $("body").removeClass('sidebar-collapse');
        $("body").addClass('sidebar-open')
    }
});

$('[data-toggle="offcanvas"]').mouseleave(function(e) {
    e.preventDefault();
    if ($("body").hasClass('sidebar-open')) {
        $("body").removeClass('sidebar-open');
        $("body").addClass('sidebar-collapse')
    };
});

这是

的css类（带媒体查询）

 .main-sidebar,
 .left-side {
  position: absolute;
  top: 0px;
  left: 0;
  padding-top: 50px;
  min-height: 100%;
  width: 230px;
  z-index: 0;
  -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s      ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

@media (max-width: 767px) {
  .main-sidebar,
   .left-side {
     -webkit-transform: translate(-230px, 0);
     -ms-transform: translate(-230px, 0);
     -o-transform: translate(-230px, 0);
     transform: translate(-230px, 0);
   }
}

@media (min-width: 768px) {
 .sidebar-collapse .main-sidebar,
 .sidebar-collapse .left-side {
    -webkit-transform: translate(-230px, 0);
    -ms-transform: translate(-230px, 0);
    -o-transform: translate(-230px, 0);
    transform: translate(-230px, 0);
  }
}

@media (max-width: 767px) {
 .sidebar-open .main-sidebar,
 .sidebar-open .left-side {
 -webkit-transform: translate(0, 0);
 -ms-transform: translate(0, 0);
 -o-transform: translate(0, 0);
 transform: translate(0, 0);
}
}

.sidebar {
 padding-bottom: 10px;
}

这是我的侧边栏所在的html代码

<aside class="main-sidebar" data-toggle="offcanvas">
 <section class="sidebar">
  <ul class="sidebar-menu">
   <li>...</li>
   <li>...</li>
   <li>...</li>
  </ul>
 </section>
<aside>

我尝试在mouseclick事件上实现它，方法是保持添加sidebar-open类，但这不起作用。任何帮助将受到高度赞赏。感谢

Answer 1

您可以将文字放在一个元素中，例如p＆＃39}。然后你可以尝试在鼠标离开时隐藏它们并在鼠标进入时显示它们。您可以在jquery中添加类似于以下行的行。

// on mouse leave
$('ul.sidebar-menu li>p').hide();

// on mouse enter
$('ul.sidebar-menu li>p').show();

编辑---

或者，您可以尝试以下CSS aside.main-sidebar，

white-space: nowrap;
overflow: hidden;

在隐藏侧边栏时，鼠标悬停时仍然可以看到菜单文本

1 个答案: