停止展開的內容在頁面加載時出現

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

定義您的默認CSS中的width: 35px更改並刪除$.trigger('mouseleave')行。

你也可以用CSS來做到這一點，順便說一句。如果你在每個$.animate()之前加上.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>