Inhaltsverzeichnis
回复内容:
Heim Backend-Entwicklung 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
        )

)

Nach dem Login kopieren
Nach dem Login kopieren

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>
Nach dem Login kopieren
Nach dem Login kopieren

回复内容:

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

)

Nach dem Login kopieren
Nach dem Login kopieren

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>
Nach dem Login kopieren
Nach dem Login kopieren

不用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>
Nach dem Login kopieren

给每层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>
Nach dem Login kopieren

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

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

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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

PHP 8.4 Installations- und Upgrade-Anleitung für Ubuntu und Debian PHP 8.4 Installations- und Upgrade-Anleitung für Ubuntu und Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 bringt mehrere neue Funktionen, Sicherheitsverbesserungen und Leistungsverbesserungen mit einer beträchtlichen Menge an veralteten und entfernten Funktionen. In dieser Anleitung wird erklärt, wie Sie PHP 8.4 installieren oder auf PHP 8.4 auf Ubuntu, Debian oder deren Derivaten aktualisieren. Obwohl es möglich ist, PHP aus dem Quellcode zu kompilieren, ist die Installation aus einem APT-Repository wie unten erläutert oft schneller und sicherer, da diese Repositorys in Zukunft die neuesten Fehlerbehebungen und Sicherheitsupdates bereitstellen.

So richten Sie Visual Studio-Code (VS-Code) für die PHP-Entwicklung ein So richten Sie Visual Studio-Code (VS-Code) für die PHP-Entwicklung ein Dec 20, 2024 am 11:31 AM

Visual Studio Code, auch bekannt als VS Code, ist ein kostenloser Quellcode-Editor – oder eine integrierte Entwicklungsumgebung (IDE) –, die für alle gängigen Betriebssysteme verfügbar ist. Mit einer großen Sammlung von Erweiterungen für viele Programmiersprachen kann VS Code c

Erklären Sie JSON Web Tokens (JWT) und ihren Anwendungsfall in PHP -APIs. Erklären Sie JSON Web Tokens (JWT) und ihren Anwendungsfall in PHP -APIs. Apr 05, 2025 am 12:04 AM

JWT ist ein offener Standard, der auf JSON basiert und zur sicheren Übertragung von Informationen zwischen Parteien verwendet wird, hauptsächlich für die Identitätsauthentifizierung und den Informationsaustausch. 1. JWT besteht aus drei Teilen: Header, Nutzlast und Signatur. 2. Das Arbeitsprinzip von JWT enthält drei Schritte: Generierung von JWT, Überprüfung von JWT und Parsingnayload. 3. Bei Verwendung von JWT zur Authentifizierung in PHP kann JWT generiert und überprüft werden, und die Funktionen und Berechtigungsinformationen der Benutzer können in die erweiterte Verwendung aufgenommen werden. 4. Häufige Fehler sind Signaturüberprüfungsfehler, Token -Ablauf und übergroße Nutzlast. Zu Debugging -Fähigkeiten gehört die Verwendung von Debugging -Tools und Protokollierung. 5. Leistungsoptimierung und Best Practices umfassen die Verwendung geeigneter Signaturalgorithmen, das Einstellen von Gültigkeitsperioden angemessen.

PHP -Programm zum Zählen von Vokalen in einer Zeichenfolge PHP -Programm zum Zählen von Vokalen in einer Zeichenfolge Feb 07, 2025 pm 12:12 PM

Eine Zeichenfolge ist eine Folge von Zeichen, einschließlich Buchstaben, Zahlen und Symbolen. In diesem Tutorial wird lernen, wie Sie die Anzahl der Vokale in einer bestimmten Zeichenfolge in PHP unter Verwendung verschiedener Methoden berechnen. Die Vokale auf Englisch sind a, e, i, o, u und sie können Großbuchstaben oder Kleinbuchstaben sein. Was ist ein Vokal? Vokale sind alphabetische Zeichen, die eine spezifische Aussprache darstellen. Es gibt fünf Vokale in Englisch, einschließlich Großbuchstaben und Kleinbuchstaben: a, e, ich, o, u Beispiel 1 Eingabe: String = "TutorialPoint" Ausgabe: 6 erklären Die Vokale in der String "TutorialPoint" sind u, o, i, a, o, ich. Insgesamt gibt es 6 Yuan

Wie analysiert und verarbeitet man HTML/XML in PHP? Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

Erklären Sie die späte statische Bindung in PHP (statisch: :). Erklären Sie die späte statische Bindung in PHP (statisch: :). Apr 03, 2025 am 12:04 AM

Statische Bindung (statisch: :) implementiert die späte statische Bindung (LSB) in PHP, sodass das Aufrufen von Klassen in statischen Kontexten anstatt Klassen zu definieren. 1) Der Analyseprozess wird zur Laufzeit durchgeführt.

Was sind PHP Magic -Methoden (__construct, __Destruct, __call, __get, __set usw.) und geben Sie Anwendungsfälle an? Was sind PHP Magic -Methoden (__construct, __Destruct, __call, __get, __set usw.) und geben Sie Anwendungsfälle an? Apr 03, 2025 am 12:03 AM

Was sind die magischen Methoden von PHP? Zu den magischen Methoden von PHP gehören: 1. \ _ \ _ Konstrukt, verwendet, um Objekte zu initialisieren; 2. \ _ \ _ Destruct, verwendet zur Reinigung von Ressourcen; 3. \ _ \ _ Call, behandeln Sie nicht existierende Methodenaufrufe; 4. \ _ \ _ GET, Implementieren Sie den dynamischen Attributzugriff; 5. \ _ \ _ Setzen Sie dynamische Attributeinstellungen. Diese Methoden werden in bestimmten Situationen automatisch aufgerufen, wodurch die Code -Flexibilität und -Effizienz verbessert werden.

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

See all articles