Question

所以我在这里要做的是：

Title0 --Subtitle1 - 隐藏 - onClick切换（） --Subtitle2 - 隐藏 - onClick toggle（）

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

那我该怎么做呢？

Answer 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');
    });
});

您可以自行选择菜单格式。

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

1 个答案: