最终效果图:
调用顶级栏目:
<div class="menu">
<div class="container">
<ul>
<li {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='active'":@me="";{/dede:field}><a href="/">网站首页</a></li>
{dede:channel row='7' type ='top' currentstyle="<li class='active'><a href='~typelink~'>~typename~</a> </li>" }
<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
<div class="clear"></div>
</div>
</div>
列表页调用二三级栏目需要用的ajax(后台请求接口/plus/getClslist.php)
一级/二级分类跳转时必须带上?topid=? 参数
html
<!-- 一级分类 -->
<div class="clsList flex-row">
<div class="cls_title">行业:</div>
<div class="cls_list clsList1">
<ul>
{dede:channel type='son' typeid="1" }
<li data-id="[field:id/]"><a href="[field:typelink/]?topid=[field:id/]" >[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>
</div>
<!-- 二级 -->
<div class="clsList clsList2 flex-row">
<div class="cls_title">项目:</div>
<div class="cls_list cls_list2">
<ul>
<li class="active"><a href="">全部</a></li>
</ul>
</div>
</div>
js
$(function(){
var urlData = GetRequest();
$(".cls_list2 ul").html(''); //清空
if(urlData != {}){
var topid = urlData.topid;
console.log(topid);
sendAjax('/plus/getClslist.php', {id:topid}, 'get', function(res){
console.log(res)
if(res.code == 0){
$(".clsList2").css('display', 'flex');
var str = '';
for(var i=0; i<res.data.length; i++){
str += '<li><a href="'+res.data[i].typelink+'?topid='+topid+'">'+res.data[i].typename+'</a></li>'
}
$(".cls_list2 ul").append(str);
}else{
$(".clsList2").css('display', 'none');
}
})
}
})
function sendAjax(url, data, type='get', callback){
$.ajax({
url: url,
type: type,
data: data,
success(res){
var rest = JSON.parse(res)
// console.log(rest)
typeof callback == "function" && callback(rest);
}
})
}
//获取域名后的id参数
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for ( var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
/plus/getClslist.php
<?php
require_once(dirname(__FILE__)."/../include/common.inc.php");
global $dsql;
$id = isset($id) && is_numeric($id) ? $id : 0;
function output_data($code=0, $msg="数据请求成功", $res){
$data = array();
$data['code'] = $code;
$data['msg'] = $msg;
$data['data'] = $res;
return json_encode($data, JSON_UNESCAPED_UNICODE);
exit();
}
if(empty($id)){
echo output_data(1, '', []);
exit;
}
$sql='Select * from dede_arctype where reid='.$id.' ORDER BY id limit 0,20';
$dsql->SetQuery($sql);
$dsql->Execute();
$arr = [];
while($row = $dsql->GetArray()){
$row['typelink'] = str_replace("{cmspath}","",$row['typedir']);
$arr[] = $row;
}
if($arr != []){
echo output_data(0, 'ok', $arr);
}else{
echo output_data(1, '无数据', []);
}
?>