Question

我目前在一个名为mnugrp的div中有一个菜单，并希望在我的网页上添加以下功能，允许用户隐藏菜单（“菜单关闭”）或显示菜单（“菜单开启” “）

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

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

非常感谢您就如何实现这一目标提供帮助。

感谢。

Answer 1

将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();
});

Answer 2

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

<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或设置属性......）

Answer 3

对于交替颜色，只需在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();
    });

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

使用jQuery切换菜单关/开

3 个答案: