急啊！！！用JS实现点击父菜单显示子菜单...

lihui198 2011-05-17 11:05:31

...全文

329 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

求摸小手 2011-08-05

打赏
举报

子菜单从数据库中获取，和我用jquery写没关系啊。你将后台获取的数据，循环写成li不就可以了吗。。。

小辛、 2011-05-18

打赏
举报

从数据库获取的话那就调用ajax读取数据,
然后在向点开的ul里面添加li,用jq也没啥不好的啊! 方便,省事,

lihui198 2011-05-18

打赏
举报

[Quote=引用 4 楼 mabao669 的回复:]
“本所简介”是父菜单，那么子菜单内容在哪里哦。。。
初步猜测了一下。您需要的应该是动态弹出层之类的东西
例如：本页面中的 "管理菜单"，鼠标指上去后，该菜单下级菜单就会显示。向此类页面推荐用UL,LI来实现。
下面给你个简单例子。由于我比较懒，所以用了jquery。而且内容很行为分离，方便你如后维护。

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C……
[/Quote]

大哥，子菜单是从数据库获取的，你能不能有JS写个...

liaohui_1018 2011-05-17

打赏
举报

就一个TABLE，实在看不出什么子菜单父菜单的

lihui198 2011-05-17

打赏
举报

比如说本所简介....

小辛、 2011-05-17

打赏
举报

我感觉这种事 ul,li做更好一些吧

还有你这贴出来的代码,父菜单是啥????

求摸小手 2011-05-17

打赏
举报

“本所简介”是父菜单，那么子菜单内容在哪里哦。。。
初步猜测了一下。您需要的应该是动态弹出层之类的东西
例如：本页面中的 "管理菜单"，鼠标指上去后，该菜单下级菜单就会显示。向此类页面推荐用UL,LI来实现。
下面给你个简单例子。由于我比较懒，所以用了jquery。而且内容很行为分离，方便你如后维护。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <style type="text/css">

	ul {background:#bbaaff; width:300px;}                                   

	li {background:#ffaabb; display:none; float:left; width:300px;}   

	</style>

  <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>

  <script type="text/javascript">

	$(function(){

	$("ul").click(function(){					//点击事件

		$(this).children("li").show().end().siblings().children("li").hide();

		//$(this).children("a").show().end()	 被点击的父菜单的子菜单显示，

		//.siblings().children("a").hide();		同辈父菜单下的子菜单隐藏

	});

	});

  </script>

 </HEAD>



 <BODY>

  <ul>主页

  <li>主页子内容1(根据你自己的需要更改就可以了)</li>

  <li>主页子内容2(如果觉得难看就丰富一下CSS)</li>

  <li>主页子内容3(当然也可以在显示的时候，修改CSS来提升视觉效果)</li>

  <li>主页子内容4(需要连接，请自己在 li 中加 a)</li>

  </ul>

    <ul>本所简介

  <li>本所简介子内容1</li>

  <li>本所简介子内容2</li>

  <li>本所简介子内容3</li>

  <li>本所简介子内容4</li>

  </ul>

   <ul>新闻公告

  <li>新闻公告子内容1</li>

  <li>新闻公告子内容2</li>

  <li>新闻公告子内容3</li>

  <li>新闻公告子内容4</li>

  </ul>

  <span>用jquery不止是偷懒，虽然他的确方便。主要还是利于 页面内容与行为分离。</span>

 </BODY>

</HTML>