jquery ajax实现下拉折叠菜单实例

先看一下成功之后的效果图

未点击之前

点击之后

有朋友会说这个效果用js也可以实现呀，但本人对js不怎么懂所以就只有用这种办法了

html页面(注意页面中的ID）

 代码如下 复制代码

<div class="homeNode" id="homeNode1">
<ul class="homeNodeSuper">
{dede:channelartlist typeid="23"}

<li id="headBrand{dede:field.id/}" class="compHeader"><a href=""  onclick="ajaxdata({dede:field.id/});return false;">
      {dede:field.typename/}
       </a>
                        </li>
   <div id="sectionHintBox{dede:field.id/}"  style="display:none;" >
      
      <ul class="homeNodeSection" id="sectionHint{dede:field.id/}">
                       
                        </ul>
                       
      </div>
{/dede:channelartlist} 
      
</ul>    
</div> 

上面是dedecms标签通过生成之后代码如下

 代码如下 复制代码

<div class="homeNode" id="homeNode1">
  
       
    
     <ul class="homeNodeSuper">
     <li id="headBrand24" class="compHeader"><a href=""  onclick="ajaxdata(24);return false;">
      机械设备检测
       </a>
                        </li>
      <div id="sectionHintBox24"  style="display:none;" >
      
      <ul class="homeNodeSection" id="sectionHint24">
                       
                        </ul>
                       
      </div><li id="headBrand25" class="compHeader"><a href=""  onclick="ajaxdata(25);return false;">
      仪表设备检测
       </a>
                        </li>
      <div id="sectionHintBox25"  style="display:none;" >
      
      <ul class="homeNodeSection" id="sectionHint25">
                       
                        </ul>
                       
      </div><li id="headBrand26" class="compHeader"><a href=""  onclick="ajaxdata(26);return false;">
      电气设备检测
       </a>
                        </li>
      <div id="sectionHintBox26"  style="display:none;" >
      
      <ul class="homeNodeSection" id="sectionHint26">
                       
                        </ul>
                       
      </div><li id="headBrand27" class="compHeader"><a href=""  onclick="ajaxdata(27);return false;">
      通讯设备检测www.111cn.neT
       </a>
                        </li>
      <div id="sectionHintBox27"  style="display:none;" >
      
      <ul class="homeNodeSection" id="sectionHint27">
                       
                        </ul>
                       
      </div><li id="headBrand28" class="compHeader"><a href=""  onclick="ajaxdata(28);return false;">
      工程检测设备
       </a>
                        </li>
      <div id="sectionHintBox28"  style="display:none;" >
      
      <ul class="homeNodeSection" id="sectionHint28">
                       
                        </ul>
                       
      </div> 
      
     </ul>
    
    
    
  </div> 

注意代码中每个ID都是在页面唯一的否则可能出问题

下面我们来定义css代码很简单

 代码如下 复制代码
<style>
 .compHeader{ background:url(/images/a_hhPlus.gif) no-repeat; padding-left:20px;}
 .compHeaderexpanded{background:url(/images/b_hhMinus.gif) no-repeat;padding-left:20px;line-height:18px;}
 .homeNodeSection{ margin:0px; height:auto;padding-left:18px;}
 .compHeader { line-height:18px;}
 .homeNodeSuper{padding-top:10px;}
 </style>

中间有两张图片作背景，一个是+号，一个是-号了，这个大家自行找图吧,好了现在看jquery代码

 代码如下 复制代码

<script language="javascript">

function ajaxdata(id)
{
 //alert(id);
 
 $.post("/typeindex.php",{pid: id }, function(data){
   $('#sectionHint'+id).html(data); 
  
 });
 
 if ($('#headBrand'+id).hasClass("compHeader"))
        {
            $('#headBrand'+id).attr("class", "compHeaderexpanded");  
   
        }
     else  
        {
            $('#headBrand'+id).attr("class", "compHeader");
   
        }
  if( $('#sectionHintBox'+id).css('display')=='block' )
    {
     $('#sectionHintBox'+id).hide(100);
    
    }
    else
    {
    $('#sectionHintBox'+id).show(100);
    }  
  
}
</script>

好了最后就是php文件上场了

 代码如下 复制代码

<?php
require_once (dirname(__FILE__) . "/include/common.inc.php");
mysql_connect($cfg_dbhost,$cfg_dbuser,$cfg_dbpwd) or die( mysql_error());
mysql_select_db($cfg_dbname);
mysql_query("set Names '$cfg_db_language' ");
$topid = intval( isset($_POST['pid'])?$_POST['pid']:9999999 );
$sql ="select * from ".$cfg_dbprefix."arctype where reid= $topid ";

$query = mysql_query( $sql ) or die(mysql_error().$sql);
$str = '';
if( mysql_num_rows( $query ) ) //www.111cn.net
{
 while( $rs = mysql_fetch_array( $query ) )
 {
  $tn =getcount( $rs['id'] );
  $str .="<li class=sonclassindex><a href=".str_replace('{cmspath}','',$rs['typedir']).">".$rs['typename']."</a><small>($tn)</small></li>";
 }
 
 //echo $str;
 
 
  echo $str;

}

function getcount( $id )
{
 global $cfg_dbprefix;
 $sql ="select * from ".$cfg_dbprefix."archives where typeid= $id ";
 $query = mysql_query( $sql ) or die(mysql_error().$sql);
 return mysql_num_rows( $query );
}

?>

好了php代码就不介绍了，数据库连接调用的是dedecms系统的简单处理一下。

注意：本站原创教程拒绝未带链接转载 http://www.111cn.net

 

时间： 2024-10-24 22:40:24

jquery ajax实现下拉折叠菜单实例的相关文章

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码_javascript技巧

像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl

jquery 竖向二级下拉导航菜单

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery 竖向二级下拉导航菜单<

javascript省市区三级联动下拉框菜单实例演示_javascript技巧

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

JQuery实现级联下拉框效果实例讲解_jquery

用JQuery和select来实现汽车厂商和汽车类型的联动,参考过程如下效果图:      逻辑分析图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

纯CSS制作下拉导航菜单实例代码

css|菜单|导航|下拉 <style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul li {float:left;position:relat

jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态_jquery

功能:省,市,地区三级联动,采用jquery ajax 取数据绑定,页面刷新或提交后选定值能保存并保持选中状态 把以下代码放在一个单独的js文件中,在页面上引用即可调用 复制代码 代码如下: //获取cookie值function readCookie(name) {    var cookieValue = "";    var search = name + "=";    if (document.cookie.length > 0) {       

js 下拉折叠菜单代码

','')"> 神华神东电力有限责任公司2×12MW煤粉湿冷机组.1×16500KVA电石生产线.2×12500KVA电石生产线及5×3万吨/年焦化生产线等拆除工程范围系指与神华神东电力有限责任公司2×12MW煤粉湿冷机组.1×16500KVA电石生产线.2×12500KVA电石生产线及5×3万吨/年焦化生产线等相关联的设备及建构物.范围内所有的设备及建构物的基础.范围内的地上地下所有管线及范围内室外沟道拆除,但不包括所有拆除区域内的树木,并保证拆除后,地面平整,无沟道.无建筑垃圾等.上述

jquery无限级联下拉菜单简单实例演示_jquery

本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路.分享给大家供大家参考.具体如下: 最终效果图: 因为是级联,所以数据必须是树型结构的,这里的测试数据如下: 看下效果图: 1.效果图一:   2.效果图二:   3.效果图三:     由图可知,下拉框的个数并不是写死的,而是动态加载的.每当下拉框选择改变的时候,会发送一次ajax请求,请求成功返回json格式数据,当返回的数据不为空时(即有子节点时),则会向页面中添加一个下拉框,没有则不添加. 插件的实现代

jQuery+ajax实现无刷新级联菜单示例_jquery

前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 CasMenu.aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC &quo