先看一下成功之後的效果圖
未點擊之前
點擊之後
有朋友會說這個效果用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
