Question

我有以下菜单：

<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设计。

http://jsfiddle.net/t86Vp/

我想如果可以隐藏左边的大部分菜单并且每次点击菜单都取消隐藏它？如果有可能任何人都可以使用javascript / css提供解决方案吗？

提前致谢。

感谢您的快速回答，我知道我可能没有很好地解释自己，因为英语不是我的主要语言。

编辑：我真正想要的只是显示菜单的一部分，每次我把它剔除，然后显示或隐藏其他部分。

再次感谢您的快速回答

对不起，如果我不能说清楚英语不是我的主要语言。

具有相同问题/想法的人的解决方案:(每次点击时打开或关闭的菜单

感谢@Sergio

http://jsfiddle.net/6xCEp/2/

Answer 1

你可以用这个：

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

Demo

Answer 2

您可能需要javascript。在您的页面中包含jquery并尝试此

$("#squaremenu a").on("click", function(){
    var $this = $(this);    
    $this.find("span").toggleClass("menu-item-visible");
});

您可能需要将显示该菜单的所有css样式分组到一个类下，然后如上所示切换该类。在我的例子中，我使用了class menu-item-visible

如果您对此有任何疑问或者不清楚，请告诉我

单击时显示菜单

2 个答案:

Demo