How to implement list expansion and hiding in php code

List expansion hides php code In a web page, there is usually some content that needs to be displayed to users, but when there is a lot of content, it also becomes important to keep the entire page clean and tidy. At this time, we can achieve this effect by expanding and hiding the list.

In this article, we will introduce how to use php code to achieve this function. 1. Implement hidden html code for list expansion The implementation of the list expansion hiding effect is based on HTML code, which can be accomplished through so-called "anchor points". Anchors can be used to reach different parts of the page. By giving the anchor a name, we can link to it anywhere on the page and scroll the page to the corresponding location.

The following is the basic html code used to implement list expansion and hiding:

 ```
<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 id="项目">项目1</h2>
    <p>这是项目1的内容</p>
</div>

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

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

The above code generates an unordered list of three items, each item has a link to the corresponding The anchor point for the content.

Here, the content of each item is included in a div with the corresponding id.

2. Add styles to hide the list display Next, we need to add styles to the divs so that they remain "hidden" initially until the user clicks on an item in the list. For this functionality we can use CSS and JavaScript. In the CSS file, we need to set the display attribute of all div elements to none:

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

Next, in JavaScript, we need to write a function to toggle the visibility of the list items. The code below demonstrates how to use JavaScript to toggle visibility when a list is clicked:

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

Now, we need to add this JavaScript function to the onclick attribute of each item link:

 ```
<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>
```

Here, the onclick attribute will call the JavaScript function we just created, passing the id of the corresponding div as a parameter. Finally, we also need to declare styles for each div element to distinguish them from other elements of the page. We can add a class to achieve this:

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

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

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

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

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

3. Use PHP code to expand and hide the list Now, we have successfully created an expanded hidden list based on html, css and javascript. However, if the page has a lot of content or the content needs to be updated regularly, manually creating the html code for each item can become very cumbersome.

At this time, we can use php code to dynamically generate the list. Using PHP you can easily get content from a database or file and automatically generate HTML code using loop structures. Here is an example of database driven php code to dynamically get item information from the database and add them to our list:

 ```
$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 id="nbsp-nbsp-row-title-nbsp-nbsp">" . $row["title"] . "</h2><p>" . $row["content"] . "</p></div>";
    }
    echo "</ul>";
} else {
    echo "0 结果";
}

$conn->close();
```

This code will get from the database named "myDB" project, and use a loop structure to automatically generate a list, and call the previously mentioned JavaScript function to achieve the expansion and hiding effect.

Conclusion

By using html, css, JavaScript and php, we can easily implement a useful list expansion and hiding effect. Whether you create static HTML code manually or dynamically generate code from a database or other resources, you can effectively increase the neatness and readability of your pages.

The above is the detailed content of How to implement list expansion and hiding in php code. For more information, please follow other related articles on the PHP Chinese website!