使用jQuery切换菜单关/开

我目前有一个名为mnugrp的div内的菜单，并希望将以下功能添加到我的网页上，以便允许用户隐藏菜单（“Menu Off”）或显示菜单（“菜单打开”）使用jQuery切换菜单关/开

随着主菜单显示开始，我希望能够在页面上放置此“菜单关闭”项目，这将是一个可点击的项目在页面上，当用户点击“Menu Off”悬停项目，将其切换到“Menu On”并隐藏主菜单，反之亦然。

还想在每个菜单关闭（红色）和菜单开启（绿色）上交替显示文本的颜色。

希望你能帮助你实现这个目标。

谢谢。

来源

2010-06-29 tonyf

将“toggle”附加到“菜单关闭”/“菜单打开”元素。使用处理程序可以更改按钮元素和菜单，同时切换两者。

喜欢的东西：

var $button = $("#button"), $menu = $("#menu"); 
$button.toggle(function() { 
    $button.text("Menu On").css("color", "green"); 
    $menu.show(); 
}, 
function() { 
    $button.text("Menu Off").css("color", "red"); 
    $menu.hide(); 
});

来源

2010-06-29 04:17:26 TomWilsonFL

像这样的东西应该给你基本的隐藏/显示功能：

<input type="button" value="Menu Off" class="buttonOff" /> 
<input type="button" value="Menu On" class="buttonOn" /> 

<script class="text/javascript"> 
$("input.buttonOn").click(function(){ $("div.mnugrp").slideDown("slow"); }); 
$("input.buttonOff").click(function(){ $("div.mnugrp").slideUp("slow"); }); 
</script>

从那里，你可以风格的按钮，你喜欢的任何方式（使用CSS，或设置属性...）

来源

2010-06-29 04:18:02 Greg

对于交替的颜色，只需在一个ul上使用css，像这样。

如果您的列表如下所示：

<ul id="myList"> 
    <li>List Item 1</li> 
    <li>List Item 2</li> 
</ul>

你的CSS是这样的：

#myList > li:nth-child(odd){ 
    background:#fff; 
} 
#myList > li:nth-child(even){ 
    background:#ccc; 
}

为jQuery的，jQuery是不是我的本地库，但我相信jQuery使用类似下面的语法来显示或隐藏点击事件：

$('#hide_list_button').toggle(function() { 
     $('#myList').hide(); 
    }, function() { 
     $('#myList').show(); 
    });

显然上面的代码没有经过测试，但它应该让你开始。

来源

2010-06-29 04:18:38 Jesse

使用jQuery切换菜单关/开

回答

相关问题