Question

我使用Javascript，PHP，CSS和HTML创建了一组下拉项。该页面的目标是以下拉样式提供更多信息。它从MySQL数据库中提取数据并使用PHP while循环创建多个下拉项。但是，当我点击任何下拉列表时，它只会切换第一个下拉列表而不是目标下拉列表。

HTML：

<?php
session_start();
if(!isset($_SESSION['login'])) {
header('Location: AdminLogin.php');
exit;
}
$user = 'root';
$password = 'hidden';
$db = 'Internships';
$host = 'localhost';

$conn = new mysqli($host, $user, $password, $db);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Internships</title>
    <link href="UserStyle.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
        <link rel="stylesheet" href="css/dropdown.css">
</head>

<body>
    <img src="BT-Square-Logo.png" class="logo" alt='BT Logo'>
    <header>
    <div class="container">
            <nav>
        <ul>
            <li><a href='Pre-approved_Internships.php'>Pre-approved Internships</a></li>
            <li><a href='Logout.php'>Logout</a></li>
        </ul>
    </nav>
    </div>
    </header>
    <?php
        $result = mysqli_query($conn, "SELECT * FROM Internships");
        while($row = mysqli_fetch_array($result)):
    ?>
    <div class="demo">
      <div class="head" onclick="toggleActive(); return false;"><?= $row['Company'] ?>
      </div>
      <div class="content-outer hidden">
        <div class="content-inner">
                <table style="width:100%">
              <tr>
                <th>Cluster</th>
                <th>Company</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
                <th>Phone</th>
                <th>Fax</th>
                <th>Email</th>
                <th>Description</th>
                <th>Skills</th>
                <th>Tasks</th>
                <th>Hours</th>
                <th>Number of Students</th>
              </tr>
              <tr>
                <td><?= $row['Cluster']; ?></td>
                <td><?= $row['Company']; ?></td>
                <td><?= $row['FName']; ?></td>
                <td><?= $row['LName']; ?></td>
                <td><?= $row['Address1'] . ', ' . $row['Address2'] . ', ' . $row['City'] . ', ' . $row['State'] . ', ' . $row['Zipcode']; ?></td>
                <td><?= $row['Phone']; ?></td>
                <td><?= $row['Fax']; ?></td>
                <td><?= $row['Email']; ?></td>
                <td><?= $row['Description']; ?></td>
                    <td><?= $row['Skill1'] . ', ' . $row['Skill2'] . ', ' . $row['Skill3'] . ', ' . $row['Skill4'] . ', ' . $row['Skill5'];?></td>
                    <td><?= $row['Task1'] . ', ' . $row['Task2'] . ', ' . $row['Task3'] . ', ' . $row['Task4'] . ', ' . $row['Task5']; ?></td>
                    <td><?= $row['Hours']; ?></td>
                    <td><?= $row['Students'] ?></td>
              </tr>
            </table>
        </div>
      </div>
    </div>
    <?php endwhile; ?>
    <script  src="js/dropdown.js"></script>
</body>
</html>

使用Javascript：

const content = document.querySelector('.content-outer')

function toggleActive () {
  content.classList.toggle('hidden')
}

Answer 1

您正在使用querySelector来选择DOM中的第一个元素。为此，您需要为每个元素提供唯一的ID。如果您有一个名为id的列或类似含有唯一ID的列，则可以使用该列。

更改此

<div class="head" onclick="toggleActive(); return false;">

进入这个

<div class="head" onclick="toggleActive("<?= $row['id']; ?>"); return false;">

这个

<div class="content-outer hidden">

进入这个

<div id="content-<?= $row['id']; ?>" class="content-outer hidden">

javascript将是

function toggleActive (id) {
  document.getElementById("content-"+id).classList.toggle('hidden')
}

您实际上是在为元素提供唯一标识符，因此您可以通过Javascript访问它们。

如果您没有id，则可以在while内使用计数器。

Javascript下拉对象仅切换第一个下拉列表

1 个答案: