僅在菜單上單擊隱藏

Question

我正在導航菜單項。 將鼠標懸停在我的菜單項上，它將擴展並在鼠標懸停時熄滅。 在我們單擊菜單項的外側之前，我將其置於伸展位置。 但是，我只需要單擊其他菜單項。

例如，如果我單擊任何菜單項，它將固定在一個位置，但是當我單擊任何其他項時，它應該移入。

當前，無論我在哪個窗口單擊，它都處於隱藏狀態。 但是要求就像它僅在我們單擊其他菜單項時才應隱藏。

點擊這里查看圖像

 #mySidenav a { position: absolute; left: -80px; transition: 0.3s; padding: 15px; width: 100px; text-decoration: none; font-size: 20px; color: white; border-radius: 0 5px 5px 0; } #mySidenav a:focus { position: fixed; left: 0; } #mySidenav a:hover { left: 0; } #about { top: 20px; background-color: #4CAF50; } #blog { top: 80px; background-color: #2196F3; } #projects { top: 140px; background-color: #f44336; } #contact { top: 200px; background-color: #555 } 

 <div id="mySidenav" class="sidenav"> <a href="#" id="about">About</a> <a href="#" id="blog">Blog</a> <a href="#" id="projects">Projects</a> <a href="#" id="contact">Contact</a> </div> 

Answer 1

例如使用額外的類：

 $('#mySidenav a').on('click', function() { $('a.fixed').removeClass('fixed'); $(this).addClass('fixed'); }); 

 #mySidenav a { position: absolute; left: -80px; transition: 0.3s; padding: 15px; width: 100px; text-decoration: none; font-size: 20px; color: white; border-radius: 0 5px 5px 0; } #mySidenav a:focus, #mySidenav a.fixed{ position: fixed; left: 0; } #mySidenav a:hover { left: 0; } #about { top: 20px; background-color: #4CAF50; } #blog { top: 80px; background-color: #2196F3; } #projects { top: 140px; background-color: #f44336; } #contact { top: 200px; background-color: #555 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mySidenav" class="sidenav"> <a href="#" id="about">About</a> <a href="#" id="blog">Blog</a> <a href="#" id="projects">Projects</a> <a href="#" id="contact">Contact</a> </div> <div style="margin-left:80px;"> <h2>Hoverable Sidenav Buttons</h2> <p>Hover over the buttons in the left side navigation to open them.</p> </div> 

Answer 2

您在這里需要一些Javascript！

 $(document).ready(function() { $('#mySidenav a').on('click', function() { $('#mySidenav a').removeClass('fix'); $(this).addClass('fix'); }); }); 

 #mySidenav a { position: absolute; left: -80px; transition: 0.3s; padding: 15px; width: 100px; text-decoration: none; font-size: 20px; color: white; border-radius: 0 5px 5px 0; } #mySidenav a.fix { position: fixed; left: 0; } #mySidenav a:hover { left: 0; } #about { top: 20px; background-color: #4CAF50; } #blog { top: 80px; background-color: #2196F3; } #projects { top: 140px; background-color: #f44336; } #contact { top: 200px; background-color: #555 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mySidenav" class="sidenav"> <a href="#" id="about">About</a> <a href="#" id="blog">Blog</a> <a href="#" id="projects">Projects</a> <a href="#" id="contact">Contact</a> </div>