JQuery 实现2个静态菜单效果

最新推荐文章于 2019-07-08 23:39:11 发布

最新推荐文章于 2019-07-08 23:39:11 发布 · 176 阅读

文章标签：

#jQuery #UI #HTML #ViewUI

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍使用JQuery实现两种不同类型的菜单效果的方法。一种是树型菜单，利用了JQuery treeview插件；另一种是手风琴菜单，通过JQuery UI组件完成。文章提供了详细的HTML结构及对应的JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日期 2009年3月13日换公司后的第二天

公司要求用到 JQuery , 以前最它只有一些简单的了解...看来必须好好的学习下才行啊..

今天初步的做了2个菜单效果..实现比较简单..现记录如下:

首先需要对 JQuery 一些基本的选择器用法有一定的了解..

([color=red]注意哦.:都是静态效果的[/color],)

第一个: 树型菜单

1:要准备的包: jquery.js(jquery核心包)
jquery.treeview.js(下载这个树型的plugin)

2:html代码如下,每一个<ul>表示一个父节点,父节点下面每一个平级子节点用<li>标签


<div id="titleDiv" class="titleDiv">
    	树菜单
    </div>
    <div id="workDiv" class="workDiv">
      <div>
    <ul id="tree" class="treeview">
	 <li>
	     <a href="?1" >item 1</a>
	     <ul>
	       <li>
		<a href="?1.0"> item 1.0</a>
		 <ul>
	           <li>
		     <a href="?1.0.0">item 1.0.0</a>
		  </li>
		  <li>
	              <a href="?1.0.1">item 1.0.1</a>
		   </li>
		  <li>
		     <a href="?1.0.2">item 1.0.2</a>
	           </li>
		 </ul>
	</li>
	<li>
	  <a href="?1.1"> item 1.1</a>
	</li>
	<li>
	  <a href="?1.2"> item 1.2</a>
	  <ul>
	     <li>
		<a href="?1.2.0">item 1.2.0</a>
	     </li>
	     <li>
		<a href="?1.2.1">item 1.2.1</a>
	     </li>
	     <li>
		<a href="?1.2.2">item 1.2.2</a>
	     </li>
	     <li>
		<a href="?1.2.3">item 1.2.3</a>
	     </li>
	  </ul>
	</li>
      </ul>
    </li>
    <li>
      <a href="?2">item 2</a>
      <ul>
         <li>
           <a href="?2.0">item 2.0</a>
           <ul>
              <li>
	        <a href="?2.0.0">item 2.0.0</a>
	        <ul>
		  <li>
		     <a href="?2.0.0.0">item 2.0.0.0</a>
		   </li>
		   <li>
		      <a href="?2.0.0.1">item 2.0.0.1</a>
		      <ul>
		        <li>
			<a href="?2.0.0.1.0">item 2.0.0.1.0</a>
			</li>
		      </ul>
		   </li>
		</ul>
	     </li>
	<li>
            <a href="?2.0.1">item 2.0.1</a>
	</li>
	<li>
	   <a href="?2.0.2">item 2.0.2</a>
	</li>
      </ul>
    </li>
    <li>
	<a href="?2.1">item 2.1</a>
    </li>
  </ul>
 </li>
<li>
   <a href="?3">item 3</a>
   <ul>
     <li></li>
   </ul>
</li>
</ul>
</div>
<br>

3:JS代码如下:


jQuery(document).ready(function(){
  			jQuery("#tree").treeview({
  				collapsed: true,//设置相关参数
  				animated: "medium",
  				persist: "location"
  			});
  	            });

第二个菜单

所需要的包: jquery.js ui.core.js ui.accordion.js
(ui.core 好象是必须在 ui.accordion 前面导入)


  		jQuery(document).ready(function(){

  			jQuery("#accodin").accordion({event:"click",alwaysOpen:false,active:""});

  		});


<div>
  <ul id="accodin" class="">
    <li>
       <a href="#">Test 1</a>
       <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </li>
    <li>
    	<a href="#">Test 2</a>
    	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </li>
    <li>
    	<a href="#">Test 3</a>
    	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiatnulla pariatur.</div>
    </li>
    <li>
    	<a href="#">Test 4</a>
         <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </li>
  </ul>
</div>