僅隱藏在菜單上點擊

我正在處理菜單項的導航。在鼠標懸停在我的菜單項上時，它將延伸並通過鼠標移出。直到我們點擊菜單項的外側，我才使它處於擴展位置。不過，我只需要點擊其他菜單項。僅隱藏在菜單上點擊

例如，如果我點擊任何菜單項，它將是固定的位置，但是當我點擊任何其他項目時它應該移動。

目前無論我點擊窗口，它都隱藏着。但是這個要求就像只有當我們點擊其他菜單項時才應該隱藏。

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

來源

2017-04-25 Sriaknth Reddy

你能不能把它放進一個片段嗎？ –

放置你想要的 –

的一些屏幕截圖，你正在使用'#mySidenav a：focus'這就是爲什麼當你點擊任何其他地方的菜單項失去了固定的位置。最簡單的方法就是在點擊時爲您的元素添加一個新類。 $（「＃mySidenav a」）。on（「click」，function（e）{// add class and remove old one））' –

使用額外的類，例如：

$('#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>

來源

2017-04-25 06:35:21 Sojtin

在這裏要小心。由於'$（document）'，這會將固定點擊類添加到頁面上的每個'a'。你應該使用'$（「＃mySidenav」）' –

@ Nitro.de對！固定 – Sojtin

是的，明白了。謝謝。 –

你需要一個這裏有一點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>

來源

2017-04-25 06:48:42 NetVicious

僅隱藏在菜單上點擊

回答

相關問題