仅隐藏在菜单上点击
我正在处理菜单项的导航。在鼠标悬停在我的菜单项上时,它将延伸并通过鼠标移出。直到我们点击菜单项的外侧,我才使它处于扩展位置。不过,我只需要点击其他菜单项。仅隐藏在菜单上点击
例如,如果我点击任何菜单项,它将是固定的位置,但是当我点击任何其他项目时它应该移动。
目前无论我点击窗口,它都隐藏着。但是这个要求就像只有当我们点击其他菜单项时才应该隐藏。
#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>
使用额外的类,例如:
$('#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>
在这里要小心。由于'$(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>
你能不能把它放进一个片段吗? –
放置你想要的 –
的一些屏幕截图,你正在使用'#mySidenav a:focus'这就是为什么当你点击任何其他地方的菜单项失去了固定的位置。最简单的方法就是在点击时为您的元素添加一个新类。 $(“#mySidenav a”)。on(“click”,function(e){// add class and remove old one))' –