[英]Show menu when clicked
我有以下菜单:
<div id ="navigation-menu">
<div id ="squaremenu">
<ul>
<li><a class ="homemenu" href="#Home" data-menuanchor="#Home"><img id ="homemenu" src="homemenu.bmp" height="30" width="30" /><span id="spanhome">Home</span></a></li>
<li><a class="imprimir" href="#Servicios" data-menuanchor="#Servicios"><img id ="imprimir" src="imprimir.bmp" height="30" width="30" /><span id="spanimprimir">Imprimir</span></a></li>
<li><a class="contacto" href="#Contacto" data-menuanchor="#Contacto"><img id="contacto" src="contacto.bmp" height="30" width="30" /><span id="spancontacto">Contacto</span></a></li>
</ul>
</div>
</div>
用CSS样式。
我想是否可以在每次单击菜单时将大多数菜单隐藏在左侧并取消隐藏? 如果有可能有人可以使用javascript / css提供解决方案?
提前致谢。
感谢您的快速答复,我知道我可能无法很好地解释自己,因为英语不是我的主要语言。
编辑:我真正想要的是仅显示菜单的一部分,每次我点击它时,然后显示或隐藏其他部分。
再次感谢您的快速答复
对不起,如果我不能说清楚英语不是我的主要语言。
针对具有相同问题/想法的人的解决方案:(每次单击时都会打开或关闭的菜单
感谢@Sergio
您可以使用此:
$('#squaremenu').on('click', function () {
$(this).addClass('abrir');
});
CSS
/************
* ADDED
*/
#squaremenu img {
display:none;
}
#squaremenu.abrir {
width:36px !important;
}
#squaremenu.abrir img {
display:block;
}
/***********
* END
*/
#squaremenu {
position:fixed;
left:0px;
top:150px;
display:block;
margin: 0px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background:rgba(43,50,61,1);
font-size: 1em;
color:white;
width:10px; /* CHANGED!! */
height:120px;
}
您可能需要使用javascript。 在页面中包含jquery并尝试执行此操作
$("#squaremenu a").on("click", function(){
var $this = $(this);
$this.find("span").toggleClass("menu-item-visible");
});
您可能需要将所有显示该菜单的css样式归为一类,然后如上所述切换该类。 在我的示例中,我使用了menu-item-visible类
如果您还有其他疑问或不清楚,请告诉我
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.