PHPコードでリストの展開と非表示を実装する方法

リスト展開により PHP コードが非表示になる Web ページには通常、ユーザーに表示する必要のあるコンテンツがいくつかありますが、コンテンツが多い場合は、ページ全体をすっきりと整頓した状態に保つことも重要になります。現時点では、リストを展開したり非表示にしたりすることでこの効果を実現できます。

この記事では、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>
```

上記のコードは、3 つの項目の順序なしリストを生成します。各項目には、対応するアンカー ポイントへのリンクがあります。内容的には。

ここでは、各項目のコンテンツが、対応する ID を持つ div に含まれています。

2. リスト表示を非表示にするスタイルを追加します。 次に、ユーザーがリスト内の項目をクリックするまで最初は「非表示」のままになるように、div にスタイルを追加する必要があります。 この機能には CSS と JavaScript を使用できます。 CSS ファイルでは、すべての div 要素の表示属性を none に設定する必要があります。

 ```
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';
    }
}
```

次に、この JavaScript 関数を各項目リンクの onclick 属性に追加する必要があります:

 ```
<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 中国語 Web サイトの他の関連記事を参照してください。