当侧边栏隐藏时，鼠标悬停时菜单文本仍然可见

Question

我正在制作一个侧边栏在我的主页像谷歌风险投资(https://www.gv.com/lib/how-to-choose-the-right-ux-metrics-for-your-product)。但我遇到的问题是，当我点击侧边栏中的任何菜单项时，侧边栏会崩溃，但菜单项的文本仍然在那里。我想保持侧边栏打开，直到鼠标光标在侧边栏区域(即使当用户单击任何菜单时，它应该保持打开/扩展)，但它在单击任何项目时崩溃，而菜单项的文本仍在空中。我不知道如何解决这个问题，因为我对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>

我试图通过不断添加边栏打开类来实现它在鼠标点击事件上，但这不起作用。任何帮助将是非常感激的。由于

Answer 1

你可以把文本放在元素中，比如p 's，然后你可以试着在鼠标离开时隐藏它们，在鼠标进入时显示它们。您可以在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;