單擊時顯示菜單

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;
}

演示

Answer 2

您可能需要使用javascript。 在頁面中包含jquery並嘗試執行此操作

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

您可能需要將所有顯示該菜單的css樣式歸為一類，然后如上所述切換該類。 在我的示例中，我使用了menu-item-visible類

如果您還有其他疑問或不清楚，請告訴我