停止在页面加载时显示扩展内容

Question

我有一个带有数字的边栏，该边栏会在悬停时扩展，以在其旁边显示文本。 但是，当我刷新页面时，一秒钟后，“隐藏”的内容就会显示出来，然后再次折叠。 我该如何阻止这种情况的发生？

这是我的代码：

<div class="sidebar">
<ul>
<li><a href=""><span>01</span> HomePage</a></li>
<li><a href=""><span>02</span> SubPage 1</a></li>
<li><a href=""><span>03</span> SubPage 2</a></li>
<li><a href=""><span>04</span> SubPage 3</a></li>
<li><a href=""><span>05</span> SubPage 4</a></li>
</ul>
</div>


.sidebar {
  position: fixed;
  width:80px;
  height:100vw;
  top:0;
  left:0;
  z-index:100;
  background:#111;
  color:#fff;
  overflow:hidden;
}
.sidebar ul {
  margin:0;
  padding:0;
  width:200px;
  margin:10px;
  list-style:none;
}
.sidebar a span {
  margin:0 10px 0 0;
}
.sidebar a {
  color:#fff;
  font-size:14px;
  text-decoration:none;
}

和jQuery：

$(document).ready(function () {
    $('.sidebar').hover(function(){
        $(this).animate({width:'110px'},500);
    },function(){
        $(this).animate({width:'35px'},500);
    }).trigger('mouseleave');
});

我做错了什么？ 我该如何解决？ 谢谢！

Answer 1

定义width: 35px在默认CSS中更改width: 35px并删除$.trigger('mouseleave')行。

您还可以仅使用CSS来完成此操作，顺便说一句。 并且，如果在每个$.animate() .stop()之前添加.stop() ，则如果您将鼠标悬停在菜单上非常快，它将使菜单不会一遍又一遍地打开/关闭。

 $(document).ready(function() { $('.sidebar').hover(function() { $(this).animate({ width: '110px' }, 500); }, function() { $(this).animate({ width: '35px' }, 500); }); }); 

 .sidebar { position: fixed; width:35px; height:100vw; top:0; left:0; z-index:100; background:#111; color:#fff; overflow:hidden; } .sidebar ul { margin:0; padding:0; width:200px; margin:10px; list-style:none; } .sidebar a span { margin:0 10px 0 0; } .sidebar a { color:#fff; font-size:14px; text-decoration:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sidebar"> <ul> <li><a href=""><span>01</span> HomePage</a></li> <li><a href=""><span>02</span> SubPage 1</a></li> <li><a href=""><span>03</span> SubPage 2</a></li> <li><a href=""><span>04</span> SubPage 3</a></li> <li><a href=""><span>05</span> SubPage 4</a></li> </ul> </div> 

这里只是CSS。 简单得多。

 .sidebar { position: fixed; width:35px; height:100vw; top:0; left:0; z-index:100; background:#111; color:#fff; overflow:hidden; transition: width .5s; } .sidebar:hover { width: 110px; } .sidebar ul { margin:0; padding:0; width:200px; margin:10px; list-style:none; } .sidebar a span { margin:0 10px 0 0; } .sidebar a { color:#fff; font-size:14px; text-decoration:none; } 

 <div class="sidebar"> <ul> <li><a href=""><span>01</span> HomePage</a></li> <li><a href=""><span>02</span> SubPage 1</a></li> <li><a href=""><span>03</span> SubPage 2</a></li> <li><a href=""><span>04</span> SubPage 3</a></li> <li><a href=""><span>05</span> SubPage 4</a></li> </ul> </div>