javascript - 悬停侧边栏的调整

Question

我的侧边栏需要帮助，一个在窗口左侧表示目录，另一个在窗口顶部表示菜单

$(function() {
  $('#toc_nav').hover(function() {
    $(this).animate({
      width: '21%'
    }, 500);
    $('#iframe_wrapper').animate({
      width: '79%'
    }, 500)
  }, function() {
    $(this).animate({
      width: '2px'
    }, 500);
    $('#iframe_wrapper').animate({
      width: '100%'
    }, 500)
  }).trigger('mouseleave');
});

$(function() {
  $('#menu_nav').hover(function() {
    $(this).animate({
      height: '5%'
    }, 500);
    $('#iframe_wrapper').animate({
      height: '95%'
    }, 500)
  }, function() {
    $(this).animate({
      height: '2px'
    }, 500);
    $('#iframe_wrapper').animate({
      height: '100%'
    }, 500)
  }).trigger('mouseleave');
});

#toc_nav {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
}

#menu_nav {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
}

#content_wrapper {
  widht: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main_wrapper">

  <nav id="menu_nav">
    <span>MENU</span>
    <span id="submit_button"> Submit Lesson </span>
  </nav>

  <div id="content_wrapper">
    <nav id="toc_nav">
      <h3 id="toc_label">Table of contents</h3>
      <hr>
      <!-- TOC is generated based on the data structure -->
    </nav>

    <div id="iframe_wrapper">
      <!-- Page Content (Here is a lesson content displayed in iframe) -->
    </div>
  </div>

</div>

我遇到的问题是，当您将鼠标悬停在折叠侧栏的 2px 线上时（当窗口不是全屏时），它们往往会出现错误并反复显示和隐藏（在 Chrome 中）。

有没有办法防止这种行为？我是更多的后端开发人员，所以我完全不知道如何解决这个问题。

标签： javascriptcssfrontendhoversidebar

Answer 1

您实际上并不需要 jquery 动画，您可以使用 CSStransition代替：

$(function() {
  $('#toc_nav').hover(function() {
    this.style.width = "21%";
    $('#iframe_wrapper').height("79%");
  }, function() {
    this.style.width = "2px";
    $('#iframe_wrapper').height("100%");
  }).trigger('mouseleave');

  $('#menu_nav').hover(function() {
    this.style.height = "5%";
    $('#iframe_wrapper').height("95%");
  }, function() {
    this.style.height = "2px";
    $('#iframe_wrapper').height("100%");
  }).trigger('mouseleave');
});

#toc_nav {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
  transition: width 0.5s;
}

#menu_nav {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
  transition: height 0.5s;
}

#content_wrapper {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main_wrapper">

  <nav id="menu_nav">
    <span>MENU</span>
    <span id="submit_button"> Submit Lesson </span>
  </nav>

  <div id="content_wrapper">
    <nav id="toc_nav">
      <h3 id="toc_label">Table of contents</h3>
      <hr>
      <!-- TOC is generated based on the data structure -->
    </nav>

    <div id="iframe_wrapper">
      <!-- Page Content (Here is a lesson content displayed in iframe) -->
    </div>
  </div>

</div>

事实上，你不需要任何 javascript 来完成这个简单的任务：

#toc_nav {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
  transition: width 0.5s;
  width: 2px;
}

#menu_nav {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
  transition: height 0.5s;
  height: 2px;
}

#content_wrapper {
  width: 100%;
  height: 100%;
}

#toc_nav:hover, #toc_nav:focus
{
  width: 21%;
}
#toc_nav:hover ~ #iframe_wrapper, #toc_nav:focus ~ #iframe_wrapper
{
  width: 79%;
}
#menu_nav:hover ~ * #iframe_wrapper, #menu_nav:focus ~ * #iframe_wrapper
{
  height: 95%;
}
#menu_nav:hover, #menu_nav:focus
{
  height: 5%;
}

<div id="main_wrapper">

  <nav id="menu_nav">
    <span>MENU</span>
    <span id="submit_button"> Submit Lesson </span>
  </nav>

  <div id="content_wrapper">
    <nav id="toc_nav">
      <h3 id="toc_label">Table of contents</h3>
      <hr>
      <!-- TOC is generated based on the data structure -->
    </nav>

    <div id="iframe_wrapper">
      <!-- Page Content (Here is a lesson content displayed in iframe) -->
    </div>
  </div>

</div>