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

【www.bbyears.com--jquery】

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

未点击之前

点击之后

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

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

{dede:channelartlist typeid="23"}
• 
        {dede:field.typename/}
        
                         
     
        
        
  
                         
                         
                         
        
  {/dede:channelartlist} 
        
      
   

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

   代码如下

  
    
         
      
       

  
       
  • 
          机械设备检测
          
                           
          
          
          
    
                           
                           
                           
          
    • 
            仪表设备检测
            
                             
            
            
            
      
                             
                             
                             
            
      • 
              电气设备检测
              
                               
              
              
              
        
                               
                               
                               
              
        • 
                通讯设备检测www.111cn.neT
                
                                 
                
                
                
          
                                 
                                 
                                 
                
          • 
                  工程检测设备
                  
                                   
                  
                  
                  
            
                                   
                                   
                                   
                   
                  
                 
                
                
                
               

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

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

             代码如下

            中间有两张图片作背景，一个是+号，一个是-号了，这个大家自行找图吧,好了现在看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文件上场了

             代码如下

            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 .="

            • ".$rs["typename"]."($tn)";
               }
               
               //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

               

              本文来源：http://www.bbyears.com/wangyezhizuo/49370.html