PHP 코드에서 목록 확장 및 숨기기를 구현하는 방법

목록 확장으로 인해 PHP 코드가 숨겨집니다. 웹 페이지에는 일반적으로 사용자에게 표시해야 할 콘텐츠가 있지만, 콘텐츠가 많으면 전체 페이지를 깨끗하고 깔끔하게 유지하는 것도 중요합니다. 이때 목록을 확장하고 숨겨서 이 효과를 얻을 수 있습니다.

이 글에서는 PHP 코드를 이용하여 이 기능을 구현하는 방법을 소개하겠습니다. 1. 목록 확장을 위한 숨겨진 HTML 코드 구현 목록 확장 숨기기 효과의 구현은 소위 "앵커 포인트"를 통해 수행할 수 있는 HTML 코드를 기반으로 합니다. 앵커를 사용하여 페이지의 다른 부분에 접근할 수 있습니다. 앵커에 이름을 지정하면 페이지의 어느 위치에나 연결할 수 있고 페이지를 해당 위치로 스크롤할 수 있습니다.

목록 확장 숨기기를 구현하는 데 사용되는 기본 HTML 코드는 다음과 같습니다.

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

위 코드는 세 항목의 순서가 지정되지 않은 목록을 생성하며, 각 항목에는 해당 콘텐츠에 연결되는 앵커가 있습니다.

여기서 각 항목의 콘텐츠는 해당 ID를 가진 div에 포함됩니다.

2. 목록 표시를 숨기려면 스타일을 추가하세요. 다음으로, 사용자가 목록의 항목을 클릭할 때까지 처음에 "숨겨진" 상태로 유지되도록 div에 스타일을 추가해야 합니다. 이 기능을 위해 CSS와 JavaScript를 사용할 수 있습니다. CSS 파일에서 모든 div 요소의 표시 속성을 없음으로 설정해야 합니다.

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

다음으로 JavaScript에서 목록 항목의 가시성을 전환하는 함수를 작성해야 합니다. 아래 코드는 JavaScript를 사용하여 목록을 클릭할 때 표시 여부를 전환하는 방법을 보여줍니다.

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

이제 각 항목 링크의 onclick 속성에 이 JavaScript 함수를 추가해야 합니다.

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

여기서 onclick 속성은 호출을 호출합니다. 방금 JavaScript 함수 만들기를 만들고 해당 div의 ID를 매개변수로 전달했습니다. 마지막으로 페이지의 다른 요소와 구별하기 위해 각 div 요소에 대한 스타일을 선언해야 합니다. 이를 달성하기 위해 클래스를 추가할 수 있습니다:

 ```
.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. PHP 코드를 사용하여 목록 확장 및 숨기기 구현 이제 html, css 및 javascript를 기반으로 확장된 숨겨진 목록을 성공적으로 만들었습니다. 그러나 페이지에 콘텐츠가 많거나 콘텐츠를 정기적으로 업데이트해야 하는 경우 각 항목에 대한 HTML 코드를 수동으로 생성하는 것이 매우 번거로울 수 있습니다.

이때 PHP 코드를 사용하여 목록을 동적으로 생성할 수 있습니다. PHP를 사용하면 데이터베이스나 파일에서 콘텐츠를 쉽게 가져올 수 있고 루프 구조를 사용하여 자동으로 HTML 코드를 생성할 수 있습니다. 다음은 데이터베이스에서 항목 정보를 동적으로 가져와 목록에 추가하는 데이터베이스 기반 PHP 코드의 예입니다.

 ```
$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();
```

이 코드는 "myDB"라는 데이터베이스에서 항목을 가져와 사용합니다. 루프 구조는 자동으로 목록을 생성하고 확장 및 숨기기 효과를 얻기 위해 앞서 언급한 JavaScript 함수를 호출합니다.

결론

html, css, JavaScript, php를 사용하면 유용한 목록 확장 숨기기 효과를 쉽게 구현할 수 있습니다. 정적 HTML 코드를 수동으로 생성하든, 데이터베이스나 기타 리소스에서 동적으로 코드를 생성하든 관계없이 페이지의 깔끔함과 가독성을 효과적으로 높일 수 있습니다.

위 내용은 PHP 코드에서 목록 확장 및 숨기기를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!