Table of Contents
回复内容:
Home Backend Development PHP Tutorial 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
        )

)

Copy after login
Copy after login

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>
Copy after login
Copy after login

回复内容:

网站导航要实现的效果类似于下图:
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
        )

)

Copy after login
Copy after login

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>
Copy after login
Copy after login

不用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>
Copy after login

给每层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>
Copy after login

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

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

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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1662
14
PHP Tutorial
1261
29
C# Tutorial
1234
24
Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

PHP and Python: Comparing Two Popular Programming Languages PHP and Python: Comparing Two Popular Programming Languages Apr 14, 2025 am 12:13 AM

PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.

PHP in Action: Real-World Examples and Applications PHP in Action: Real-World Examples and Applications Apr 14, 2025 am 12:19 AM

PHP is widely used in e-commerce, content management systems and API development. 1) E-commerce: used for shopping cart function and payment processing. 2) Content management system: used for dynamic content generation and user management. 3) API development: used for RESTful API development and API security. Through performance optimization and best practices, the efficiency and maintainability of PHP applications are improved.

PHP: A Key Language for Web Development PHP: A Key Language for Web Development Apr 13, 2025 am 12:08 AM

PHP is a scripting language widely used on the server side, especially suitable for web development. 1.PHP can embed HTML, process HTTP requests and responses, and supports a variety of databases. 2.PHP is used to generate dynamic web content, process form data, access databases, etc., with strong community support and open source resources. 3. PHP is an interpreted language, and the execution process includes lexical analysis, grammatical analysis, compilation and execution. 4.PHP can be combined with MySQL for advanced applications such as user registration systems. 5. When debugging PHP, you can use functions such as error_reporting() and var_dump(). 6. Optimize PHP code to use caching mechanisms, optimize database queries and use built-in functions. 7

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

React's Role in HTML: Enhancing User Experience React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

PHP vs. Python: Understanding the Differences PHP vs. Python: Understanding the Differences Apr 11, 2025 am 12:15 AM

PHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHP is suitable for web development, with simple syntax and high execution efficiency. 2. Python is suitable for data science and machine learning, with concise syntax and rich libraries.

PHP vs. Other Languages: A Comparison PHP vs. Other Languages: A Comparison Apr 13, 2025 am 12:19 AM

PHP is suitable for web development, especially in rapid development and processing dynamic content, but is not good at data science and enterprise-level applications. Compared with Python, PHP has more advantages in web development, but is not as good as Python in the field of data science; compared with Java, PHP performs worse in enterprise-level applications, but is more flexible in web development; compared with JavaScript, PHP is more concise in back-end development, but is not as good as JavaScript in front-end development.

See all articles