网站导航要实现的效果类似于下图：
我搜索了，发现都是ajax发送请求实现联动。我的要求是不发送请求，直接在php文件或html文件里写，再通过jquery实现下拉效果。
目录导航的数组如下：level=0表示第1层，紧跟的level=1/2……表示是第1层的子菜单。
Array
(
[0] => Array
(
[cat_id] => 3
[cat_name] => JavaScript
[parent_id] => 0
[level] => 0
)
[1] => Array
(
[cat_id] => 5
[cat_name] => Jquery
[parent_id] => 3
[level] => 1
)
[2] => Array
(
[cat_id] => 6
[cat_name] => JS高级
[parent_id] => 3
[level] => 1
)
[3] => Array
(
[cat_id] => 4
[cat_name] => PHP
[parent_id] => 0
[level] => 0
)
)
html代码如下：
<ul id="nav">
<li><a href="./">首页</a></li>
<?php foreach ($treelist as $v) { ?>
<li><a href="category.php?cid=<?php echo $v['cat_id']; ?>"><?php echo $v['cat_name']; ?></a></li>
<?php } ?>
</ul>
回复内容：
网站导航要实现的效果类似于下图：
我搜索了，发现都是ajax发送请求实现联动。我的要求是不发送请求，直接在php文件或html文件里写，再通过jquery实现下拉效果。
目录导航的数组如下：level=0表示第1层，紧跟的level=1/2……表示是第1层的子菜单。
Array
(
[0] => Array
(
[cat_id] => 3
[cat_name] => JavaScript
[parent_id] => 0
[level] => 0
)
[1] => Array
(
[cat_id] => 5
[cat_name] => Jquery
[parent_id] => 3
[level] => 1
)
[2] => Array
(
[cat_id] => 6
[cat_name] => JS高级
[parent_id] => 3
[level] => 1
)
[3] => Array
(
[cat_id] => 4
[cat_name] => PHP
[parent_id] => 0
[level] => 0
)
)
html代码如下：
<ul id="nav">
<li><a href="./">首页</a></li>
<?php foreach ($treelist as $v) { ?>
<li><a href="category.php?cid=<?php echo $v['cat_id']; ?>"><?php echo $v['cat_name']; ?></a></li>
<?php } ?>
</ul>
不用ajax，一次把所有数据都读出来，但是hide show 的效果必须要js了，有几种方法，可以php里把数据做成json，在js里调用show hide，也可以直接把全部array先在页面上显示成link默认hide，然后根据点哪个show哪个。
---下面是把array先在页面上生成html，但是根据不同class值来判断show/hide
把每层都查出来，把原来用0、1、2的array key 改成用每组数据的属性当做可以，如下：
<code>array(
'l1' => array(
key1 => value1,
key2 => value2,
key3 => value3
),
'l2' => array(
key1 => value1,
key2 => value2,
key3 => value3
)
.......
);
</code>
给每层array key都附上值，全部生成出来，根据key value 不同在link上生成不同的class，默认全部hide，然后click哪个按钮就显示哪个吧，几个if elseif else搞定，因为每组数据都有key了，可以简单地判断哪个按钮对应那组数据。
在显示之前把它们都查出来，只是用js默认不显示它们,等点击再显示它们
不是很明确你的意思,是要实现这样无限级树形菜单么?
<html>
<head>
</head>
<style>
/*li {list-style-type:none;}*/
span{cursor: pointer;background-color: yellowgreen;font-size: 20px}
.hidden{display: none}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<body>
<?php
$arr = Array(
Array("cat_id" => 3, "cat_name" => "JavaScript", "parent_id" => 0, "level" => 0),
Array("cat_id" => 5, "cat_name" => "Jquery", "parent_id" => 3, "level" => 1),
Array("cat_id" => 6, "cat_name" => "JS高级", "parent_id" => 3, "level" => 1),
Array("cat_id" => 7, "cat_name" => "JS高级更高级1", "parent_id" => 6, "level" => 3),
Array("cat_id" => 8, "cat_name" => "JS高级更高级2", "parent_id" => 6, "level" => 3),
Array("cat_id" => 9, "cat_name" => "JS高级更高级3", "parent_id" => 6, "level" => 3),
Array("cat_id" => 4, "cat_name" => "PHP", "parent_id" => 0, "level" => 0),
Array("cat_id" => 10, "cat_name" => "PHP高级1", "parent_id" => 4, "level" => 0),
Array("cat_id" => 12, "cat_name" => "PHP高级2", "parent_id" => 4, "level" => 0),
Array("cat_id" => 13, "cat_name" => "PHP高级3", "parent_id" => 4, "level" => 0)
);
//创建树形菜单
function createTree(&$arr, $parent_id) {
$hide = "";
if ($parent_id != 0) {
$hide = "hidden";
}
$funcName = __FUNCTION__;
$ul = "";
$li = "";
for ($i = 0; $i < count($arr); $i++) {
if ($arr[$i]["parent_id"] == $parent_id) {
$child = $funcName($arr, $arr[$i]['cat_id']);
$li .= "\r\n<li id=\"{$arr[$i]['cat_id']}\" class=\"cate\"><span>{$arr[$i]["cat_name"]}</span>{$child}</li>\r\n";
}
}
if ($li != "") {
$ul = "
<ul class=\"cate {$hide}\">{$li}</ul>
";
}
return $ul;
}
echo createTree($arr, 0);
?>
</body>
<script>
(function() {
$(".cate").hover(function() {
$(this).children("ul").show()
}, function() {
$(this).children("ul").hide()
})
})()
</script>
</html>
- 将所有的数据预先加载进来，赋给一个js变量。每次选择级联菜单，都从这个变量读取数据。
- 这样做相当于把ajax分次请求的数据一次请求下来。
php echo 一个json数据给js的变量
预先在页面中生成json格式数据，传递给js就可以了。
PHP和Python：解釋了不同的範例Apr 18, 2025 am 12:26 AMPHP主要是過程式編程，但也支持面向對象編程（OOP）；Python支持多種範式，包括OOP、函數式和過程式編程。 PHP適合web開發，Python適用於多種應用，如數據分析和機器學習。
PHP和Python：深入了解他們的歷史Apr 18, 2025 am 12:25 AMPHP起源於1994年，由RasmusLerdorf開發，最初用於跟踪網站訪問者，逐漸演變為服務器端腳本語言，廣泛應用於網頁開發。 Python由GuidovanRossum於1980年代末開發，1991年首次發布，強調代碼可讀性和簡潔性，適用於科學計算、數據分析等領域。
在PHP和Python之間進行選擇：指南Apr 18, 2025 am 12:24 AMPHP適合網頁開發和快速原型開發，Python適用於數據科學和機器學習。 1.PHP用於動態網頁開發，語法簡單，適合快速開發。 2.Python語法簡潔，適用於多領域，庫生態系統強大。
PHP和框架：現代化語言Apr 18, 2025 am 12:14 AMPHP在現代化進程中仍然重要，因為它支持大量網站和應用，並通過框架適應開發需求。 1.PHP7提升了性能並引入了新功能。 2.現代框架如Laravel、Symfony和CodeIgniter簡化開發，提高代碼質量。 3.性能優化和最佳實踐進一步提升應用效率。
PHP的影響：網絡開發及以後Apr 18, 2025 am 12:10 AMPHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip
PHP類型提示如何起作用，包括標量類型，返回類型，聯合類型和無效類型？Apr 17, 2025 am 12:25 AMPHP類型提示提升代碼質量和可讀性。 1)標量類型提示：自PHP7.0起，允許在函數參數中指定基本數據類型，如int、float等。 2)返回類型提示：確保函數返回值類型的一致性。 3)聯合類型提示：自PHP8.0起，允許在函數參數或返回值中指定多個類型。 4)可空類型提示：允許包含null值，處理可能返回空值的函數。
PHP如何處理對象克隆（克隆關鍵字）和__clone魔法方法？Apr 17, 2025 am 12:24 AMPHP中使用clone關鍵字創建對象副本，並通過\_\_clone魔法方法定制克隆行為。 1.使用clone關鍵字進行淺拷貝，克隆對象的屬性但不克隆對象屬性內的對象。 2.通過\_\_clone方法可以深拷貝嵌套對象，避免淺拷貝問題。 3.注意避免克隆中的循環引用和性能問題，優化克隆操作以提高效率。
PHP與Python：用例和應用程序Apr 17, 2025 am 12:23 AMPHP適用於Web開發和內容管理系統，Python適合數據科學、機器學習和自動化腳本。 1.PHP在構建快速、可擴展的網站和應用程序方面表現出色，常用於WordPress等CMS。 2.Python在數據科學和機器學習領域表現卓越，擁有豐富的庫如NumPy和TensorFlow。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
Dreamweaver Mac版
視覺化網頁開發工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
