自定义菜单从另一个文件加载页面内容 - jQuery

【问题标题】：Custom Menu Loads page content from another file - jQuery自定义菜单从另一个文件加载页面内容 - jQuery
【发布时间】：2012-01-24 05:33:35
【问题描述】：

所以我在这里要做的是：

标题0 --Subtitle1 - 隐藏 - onClick toggle() --Subtitle2 - 隐藏 - onClick toggle()

当用户点击“Title0”时，Subtitle1、Subtitle2 显示在左侧，页面从另一个文件加载内容。当其他文件加载“Title0”以及“Subtitle1”和“Subtitle2”显示时，根据他们单击的链接，它应该加载该文件而不是折叠菜单。

那我该怎么做呢？

【问题讨论】：

不确定我是否关注这里...您的意思是要为活动项目创建一个具有不同样式/视图的菜单？
不，我有一个包含项目和子项目的菜单，当您单击项目时使用 jquery，它会在项目下方显示子项目，现在我想要做的是当有人点击项目时从另一个文件加载内容并显示该特定项目的子项目。
好吧，如果没有任何示例代码，很难知道如何提供帮助，但请给我几分钟，我会想出一个示例（如果没有人比我更胜一筹的话）。

标签： jquery asp.net html ajax

【解决方案1】：

示例菜单 HTML

<ul>
  <li class="menu_item">Title0
    <ul style="display:none;">
      <li class="menu_subitem">Subtitle1</li>
      <li class="menu_subitem">Subtitle2</li>
    </ul>
  </li>
  <li class="menu_item">Title1
    <ul style="display:none;">
      <li class="menu_subitem">Subtitle1</li>
      <li class="menu_subitem">Subtitle2</li>
    </ul>
  </li>
</ul>

DIV 示例，用于放置您将从其他来源加载的内容：

<div id="load_stuff"></div>

示例 JavaScript（假设您已经包含了 jQuery 库）：

// process when doc is ready
$(function(){
    // add click event to LI elements with a "menu_item" class.
    $('li.menu_item').click(function(){

        // toggle the child element (subitems)
        $(this).children('ul').toggle();

        // load the page into the div with an id of "load_stuff"
        $('#load_stuff').load('http://mydomain.com/mypage.php');
    });
});

不过，您需要自己处理菜单格式。

【讨论】：