目录
回复内容:
首页 后端开发 php教程 html - php级联菜单不用ajax如何实现

html - php级联菜单不用ajax如何实现

Jun 06, 2016 pm 08:45 PM
html php

网站导航要实现的效果类似于下图:
html - php级联菜单不用ajax如何实现
我搜索了,发现都是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>
登录后复制
登录后复制

回复内容:

网站导航要实现的效果类似于下图:
html - php级联菜单不用ajax如何实现
我搜索了,发现都是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>
登录后复制

  1. 将所有的数据预先加载进来,赋给一个js变量。每次选择级联菜单,都从这个变量读取数据。
  2. 这样做相当于把ajax分次请求的数据一次请求下来。

php echo 一个json数据给js的变量

预先在页面中生成json格式数据,传递给js就可以了。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 Dec 24, 2024 pm 04:42 PM

PHP 8.4 带来了多项新功能、安全性改进和性能改进,同时弃用和删除了大量功能。 本指南介绍了如何在 Ubuntu、Debian 或其衍生版本上安装 PHP 8.4 或升级到 PHP 8.4

如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 Dec 20, 2024 am 11:31 AM

Visual Studio Code,也称为 VS Code,是一个免费的源代码编辑器 - 或集成开发环境 (IDE) - 可用于所有主要操作系统。 VS Code 拥有针对多种编程语言的大量扩展,可以轻松编写

在PHP API中说明JSON Web令牌(JWT)及其用例。 在PHP API中说明JSON Web令牌(JWT)及其用例。 Apr 05, 2025 am 12:04 AM

JWT是一种基于JSON的开放标准,用于在各方之间安全地传输信息,主要用于身份验证和信息交换。1.JWT由Header、Payload和Signature三部分组成。2.JWT的工作原理包括生成JWT、验证JWT和解析Payload三个步骤。3.在PHP中使用JWT进行身份验证时,可以生成和验证JWT,并在高级用法中包含用户角色和权限信息。4.常见错误包括签名验证失败、令牌过期和Payload过大,调试技巧包括使用调试工具和日志记录。5.性能优化和最佳实践包括使用合适的签名算法、合理设置有效期、

php程序在字符串中计数元音 php程序在字符串中计数元音 Feb 07, 2025 pm 12:12 PM

字符串是由字符组成的序列,包括字母、数字和符号。本教程将学习如何使用不同的方法在PHP中计算给定字符串中元音的数量。英语中的元音是a、e、i、o、u,它们可以是大写或小写。 什么是元音? 元音是代表特定语音的字母字符。英语中共有五个元音,包括大写和小写: a, e, i, o, u 示例 1 输入:字符串 = "Tutorialspoint" 输出:6 解释 字符串 "Tutorialspoint" 中的元音是 u、o、i、a、o、i。总共有 6 个元

您如何在PHP中解析和处理HTML/XML? 您如何在PHP中解析和处理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示了如何使用PHP有效地处理XML文档。 XML(可扩展的标记语言)是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储

解释PHP中的晚期静态绑定(静态::)。 解释PHP中的晚期静态绑定(静态::)。 Apr 03, 2025 am 12:04 AM

静态绑定(static::)在PHP中实现晚期静态绑定(LSB),允许在静态上下文中引用调用类而非定义类。1)解析过程在运行时进行,2)在继承关系中向上查找调用类,3)可能带来性能开销。

什么是PHP魔术方法(__ -construct,__destruct,__call,__get,__ set等)并提供用例? 什么是PHP魔术方法(__ -construct,__destruct,__call,__get,__ set等)并提供用例? Apr 03, 2025 am 12:03 AM

PHP的魔法方法有哪些?PHP的魔法方法包括:1.\_\_construct,用于初始化对象;2.\_\_destruct,用于清理资源;3.\_\_call,处理不存在的方法调用;4.\_\_get,实现动态属性访问;5.\_\_set,实现动态属性设置。这些方法在特定情况下自动调用,提升代码的灵活性和效率。

HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

See all articles