Comment implémenter l'expansion et le masquage de liste dans le code php

L'expansion de la liste cache le code php Dans une page Web, il y a généralement du contenu qui doit être affiché aux utilisateurs, mais lorsqu'il y a beaucoup de contenu, il devient également important de garder la page entière propre et bien rangée. À ce stade, nous pouvons obtenir cet effet en élargissant et en masquant la liste.

Dans cet article, nous présenterons comment implémenter cette fonction en utilisant du code php. 1. Implémentez le code HTML caché pour l'expansion de la liste La mise en œuvre de l'effet de masquage de l'extension de liste est basée sur du code HTML, qui peut être réalisé via ce que l'on appelle des « points d'ancrage ». Les ancres peuvent être utilisées pour atteindre différentes parties de la page. En donnant un nom à l'ancre, nous pouvons créer un lien vers elle n'importe où sur la page et faire défiler la page jusqu'à l'emplacement correspondant.

Voici le code HTML de base utilisé pour implémenter le masquage de l'expansion de liste :

 ```
<ul>
    <li><a href="#1">项目1</a></li>
    <li><a href="#2">项目2</a></li>
    <li><a href="#3">项目3</a></li>
</ul>

<div id="1">
    <h2>项目1</h2>
    <p>这是项目1的内容</p>
</div>

<div id="2">
    <h2>项目2</h2>
    <p>这是项目2的内容</p>
</div>

<div id="3">
    <h2>项目3</h2>
    <p>这是项目3的内容</p>
</div>
```

Le code ci-dessus génère une liste non ordonnée de trois éléments, chaque élément a une ancre reliant au contenu correspondant.

Ici, le contenu de chaque élément est inclus dans un div avec l'identifiant correspondant.

2. Ajoutez des styles pour masquer l'affichage de la liste Ensuite, nous devons ajouter des styles aux divs afin qu'ils restent "cachés" initialement jusqu'à ce que l'utilisateur clique sur un élément de la liste. Pour cette fonctionnalité, nous pouvons utiliser CSS et JavaScript. Dans le fichier CSS, nous devons définir l'attribut display de tous les éléments div sur none :

 ```
div {
    display: none;
}
```

Ensuite, en JavaScript, nous devons écrire une fonction pour basculer la visibilité des éléments de la liste. Le code ci-dessous montre comment utiliser JavaScript pour basculer la visibilité lorsqu'un utilisateur clique sur une liste :

 ```
function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') {
        e.style.display = 'none';
    } else {
        e.style.display = 'block';
    }
}
```

Maintenant, nous devons ajouter cette fonction JavaScript à l'attribut onclick de chaque lien d'élément :

 ```
<ul>
    <li><a href="#1" onclick="toggle_visibility(&#39;1&#39;); return false;">项目1</a></li>
    <li><a href="#2" onclick="toggle_visibility(&#39;2&#39;); return false;">项目2</a></li>
    <li><a href="#3" onclick="toggle_visibility(&#39;3&#39;); return false;">项目3</a></li>
</ul>
```

Ici, l'attribut onclick appellera l'appel. nous venons de créer une fonction JavaScript et de passer l'identifiant du div correspondant en paramètre. Enfin, nous devons également déclarer des styles pour chaque élément div afin de les distinguer des autres éléments de la page. Nous pouvons ajouter une classe pour y parvenir :

 ```
.content {
    background-color: #ddd;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}
```

然后将该类应用于div元素：

``` <div id="1" class="content">
    <h2>项目1</h2>
    <p>这是项目1的内容</p>
</div>

<div id="2" class="content">
    <h2>项目2</h2>
    <p>这是项目2的内容</p>
</div>

<div id="3" class="content">
    <h2>项目3</h2>
    <p>这是项目3的内容</p>
</div>
```

3. Utilisez le code php pour implémenter l'expansion et le masquage de la liste Maintenant, nous avons créé avec succès une liste cachée étendue basée sur HTML, CSS et Javascript. Cependant, si la page contient beaucoup de contenu ou si le contenu doit être mis à jour régulièrement, la création manuelle du code HTML pour chaque élément peut devenir très fastidieuse.

À ce stade, nous pouvons utiliser du code php pour générer dynamiquement la liste. En utilisant PHP, vous pouvez facilement obtenir le contenu d'une base de données ou d'un fichier et générer automatiquement du code HTML à l'aide de structures en boucles. Voici un exemple de code PHP piloté par une base de données pour obtenir dynamiquement les informations sur les éléments de la base de données et les ajouter à notre liste :

 ```
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 从数据库中获取项目
$sql = "SELECT id, title, content FROM projects";
$result = $conn->query($sql);

// 输出结果
if ($result->num_rows > 0) {
    // 输出每个项目
    echo "<ul>";
    while($row = $result->fetch_assoc()) {
        echo "<li><a href=\"#" . $row["id"] . "\" onclick=\"toggle_visibility(&#39;" . $row["id"] . "&#39;); return false;\">" . $row["title"] . "</a></li>";
        echo "<div id=\"" . $row["id"] . "\" class=\"content\"><h2>" . $row["title"] . "</h2><p>" . $row["content"] . "</p></div>";
    }
    echo "</ul>";
} else {
    echo "0 结果";
}

$conn->close();
```

Ce code obtiendra les éléments de la base de données nommée "myDB" et les utilisera. La structure en boucle génère automatiquement une liste et appelle la fonction JavaScript mentionnée précédemment pour obtenir l'effet d'expansion et de masquage.

Conclusion

En utilisant html, css, JavaScript et php, nous pouvons facilement implémenter un effet d'expansion-masquage de liste utile. Que vous créiez du code HTML statique manuellement ou que vous génériez dynamiquement du code à partir d'une base de données ou d'autres ressources, vous pouvez efficacement augmenter la netteté et la lisibilité de vos pages.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!