-3

我对 JS/jQuery 没用，所以需要一些帮助将我的菜单变成浏览器兼容/响应式的大型菜单。我真的不想为此使用大型插件，因为我想要的非常简单，并且不想影响页面加载变得更糟。

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

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

谁能帮帮我？

4

2 回答 2

2

好吧，我会扔给你一根骨头，因为看起来你确实尝试了几件事。您可以通过附加单击处理程序并使用 jQueryshow()和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();
        }
    });
});

工作 JSFiddle

于 2013-01-07T14:22:02.567 回答
0

这是您可以完成此任务的另一种方法。（使用 css 和一点 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*/
}

那么你可以有多个菜单，如果你需要的话，那就行了

于 2013-01-07T14:36:36.177 回答