仅隐藏在菜单上点击

我正在处理菜单项的导航。在鼠标悬停在我的菜单项上时，它将延伸并通过鼠标移出。直到我们点击菜单项的外侧，我才使它处于扩展位置。不过，我只需要点击其他菜单项。仅隐藏在菜单上点击

例如，如果我点击任何菜单项，它将是固定的位置，但是当我点击任何其他项目时它应该移动。

目前无论我点击窗口，它都隐藏着。但是这个要求就像只有当我们点击其他菜单项时才应该隐藏。

#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

仅隐藏在菜单上点击

回答

相关问题