jquery ajax 和子菜单答案

【问题标题】：jquery ajax and submenujquery ajax 和子菜单
【发布时间】：2011-12-22 00:59:44
【问题描述】：

大家好，我第一次在这里发帖，请原谅我的英语错误！

嗯，我是 jquery 和 java 的新手，但我日复一日地学习，我发现一个网页非常好

http://tympanus.net/codrops/2011/03/09/animated-content-menu/

在本教程网页的演示中，您有一个菜单，当您单击它时，它会消失，并且会出现一个特定的子菜单，具体取决于您选择的菜单元素。

我的第一个问题是：我知道如何在单击某个元素时让菜单可见，但我不知道如何通过单击菜单的另一个元素来关闭子菜单。在默认演示中，您有一个十字，您可以单击以删除子菜单并再次显示该菜单。我希望这个解释是有道理的。

第二个问题是，当您登陆主页时，如何直接显示菜单中某个元素的子菜单，因为在默认演示中，它以空内容和背景登陆。

非常感谢您的每一个回答。理查德

【问题讨论】：

标签： javascript jquery ajax submenu

【解决方案1】：

所以对于您的第一个问题，他们有如下标记：

<ul id='menu'>
    <li>
        <a href="#">Menu 1</a>
        <div>Content goes here</div>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <div>Content goes here</div>
    </li>
</ul>

你会有这样的脚本：

var anchors = $("#menu a").click(function(e){
    e.preventDefault();
    var clicked = this;
    $(this).siblings('div').show();
    anchors.filter(function(index) {
        return this !== clicked;
    }).siblings('div').hide();
});

在您登陆页面后立即显示某些内容：

$("#menu a:first").click();

【讨论】：

感谢您的回复，但我尝试使用您的解决方案在页面完全加载时显示某些内容。当然，我用正确的 id 更改了 id ;-) 但它似乎不起作用。当页面加载时它什么都不做
您是否将这个 javascript 包装在 $(document).ready(function() { //code goes here }) 中？我不确定你的问题到底是什么。
是的，我用你提到的内容包装它，事实上，当你访问演示页面时，你会出现主菜单，但我希望例如在页面完成时直接显示开胃菜的子菜单加载，就像 Appetizers 上的点击模拟一样，这个网页使用prototype.js 可能会产生一些问题。无论如何，谢谢你的时间约翰
是的，prototype 和 jquery 之间可能存在一些冲突。我从未使用过原型，所以我不确定。
好的，谢谢你的提示，我将尝试进行更多调查，我从 jquery 开始，所以这很难。不知道为什么页面加载时点击不起作用