Question

我对JS / jQuery没用，所以需要一些帮助将我的菜单变成浏览器兼容/响应的超级菜单。我真的不想“为了这个而想要使用大量插件，因为我想要的非常简单，并且不想让页面加载更糟糕。”

在页面加载时，我只想看到“打开菜单”，当点击“打开菜单”时，我想显示ul#expanded并隐藏“打开菜单”链接。然后，当点击“关闭菜单”时，我希望它隐藏ul#expanded并再次显示“打开菜单”。没什么好看的。

我一直在玩jQuery toggle，但还没有成功。我把我的HTML / CSS放在这里：http://jsfiddle.net/YrTMm/

有人可以帮帮我吗？

Answer 1

好吧，我会给你一块骨头，因为看起来你确实尝试了几件事。您可以通过附加单击处理程序并使用jQuery的show()和hide()方法轻松完成此操作。

$(document).ready(function(){
    //Set up a quick reference to the element.
    var el = $("#expanded");
    //Hide the element by default.
    el.hide();
    //Add a click handler to the 'open' link.
    $("#open").click(function(){
        //Check if the expanded menu is visible.
        if(el.is(":visible")){
            //If it is, hide it.
            el.hide();
        }else{
            //If not, show it.
            el.show();
        }
    });
});

Working JSFiddle

Answer 2

这是你可以实现这一目标的另一种方式。（使用css＆amp; a touch of jquery）

http://jsfiddle.net/CSmg7/

首先，你可以简化你的导航（是的，我知道你需要在UL中使用真实的东西），而且，将锚作为ul的直接子项是无效的，它应该包含在列表项中，或者在ul之外。你最好的选择可能是使用一个或用于你的菜单

<nav id="nav">
    <ul>
        <li>
          <a href="#" class="open toggleMenu">Open Menu</a><a href="#" class="closed toggleMenu">Close Menu</a>
            <ul>
                <li>something</li>
                <li>something</li>
            </ul>
        </li>
    </ul>
</nav>

只需使用js将一个类添加到父级：

$("#nav")
.on("click", ".toggleMenu", function(event){
 event.preventDefault();
 $(this)
  .parent()
   .toggleClass("open");
});

并添加一点css以使你的jquery工作：

#nav li ul,
#nav li .toggleMenu.closed,
#nav li.open .toggleMenu.open{
display: none;
}
#nav li.open ul,
#nav li.open .toggleMenu.closed{
display: block; /*or whatever you need*/
}

然后你可以有多个菜单，只要你需要它就可以了

如何将导航变为大型菜单？

2 个答案: