Question

我有一个带有数字的侧边栏，可以在悬停时展开，以显示旁边的文字。但是，当我刷新页面时，一瞬间就隐藏了＃39;内容显示再次折叠之前。我怎样才能阻止这种情况发生？

这是我的代码：

<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

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

你也可以用CSS，btw来做到这一点。如果您在每个.stop()之前添加$.animate()，那么如果您快速地将菜单悬停在菜单上/关闭菜单，它将使菜单不会一遍又一遍地打开/关闭。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这里只是CSS。更简单。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: