PHP循环渲染下拉按钮仅触发首个元素菜单的问题求助

问题原因 #

循环生成帖子头部时，所有下拉菜单都使用了同一个id="dropdownMenu"，而document.getElementById()只会返回页面中第一个匹配该id的元素，导致无论点击哪个下拉图标，都只会触发第一个帖子的下拉菜单。

解决方案 #

方法1：通过元素关联定位对应下拉菜单 #

无需生成唯一id，利用点击元素的父节点找到对应的下拉菜单：

1. 修改图标点击事件，传递当前元素：

<i class="fa fa-ellipsis-v" aria-hidden="true" onclick="toggleDropdown(this)"></i>

2. 移除下拉菜单的重复id（保留class即可）：

<div class="dropdown-content">

3. 更新toggleDropdown函数：

function toggleDropdown(icon) {
  // 找到当前图标所在容器内的下拉菜单
  const dropdownMenu = icon.parentElement.querySelector('.dropdown-content');
  dropdownMenu.classList.toggle('show');
}

方法2：使用事件委托（更适合大量元素） #

不给每个图标单独绑定事件，通过父容器的事件冒泡处理点击：

1. 移除图标上的onclick属性：

<i class="fa fa-ellipsis-v" aria-hidden="true"></i>

2. 给所有帖子的父容器（需新增）绑定事件：

// 给帖子列表父容器绑定点击事件
document.getElementById('feed-container').addEventListener('click', function(event) {
  if (event.target.matches('.fa-ellipsis-v')) {
    const dropdownMenu = event.target.parentElement.querySelector('.dropdown-content');
    // 先关闭其他已打开的下拉菜单
    document.querySelectorAll('.dropdown-content.show').forEach(menu => {
      if (menu !== dropdownMenu) menu.classList.remove('show');
    });
    // 切换当前菜单状态
    dropdownMenu.classList.toggle('show');
  }
});

3. 点击外部关闭菜单的逻辑优化：

window.addEventListener('click', function(event) {
  if (!event.target.matches('.fa-ellipsis-v') && !event.target.closest('.dropdown-content')) {
    document.querySelectorAll('.dropdown-content.show').forEach(menu => {
      menu.classList.remove('show');
    });
  }
});

完整修改后代码示例 #

CSS（新增show类控制显示） #

.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 30px;
  right: 0;
  background-color: #f9f9f9;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content.show {
  display: block;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

PHP部分（新增父容器） #

<?php
$loggedIn = false;
error_reporting(E_ALL);
ini_set('display_errors', 1);

if (isset($_SESSION['loggedIn']) && isset($_SESSION['username'])) {
    $loggedIn = true;    
    $_SESSION['profile_picture'] = $user['p_p'];
}
require_once("db.php");
$sql = "SELECT * FROM feed ORDER BY created DESC LIMIT 12";
$result = $conn->query($sql);
?>
<!-- 新增父容器用于事件委托 -->
<div id="feed-container">
<?php
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $userId = $row['user_id'];
        $feed_id = $row['feed_id'];

        $userQuery = "SELECT * FROM users WHERE user_id = $userId";
        $userResult = $conn->query($userQuery);
 
        if ($userResult->num_rows > 0) {
            $userData = $userResult->fetch_assoc();
?>
<div class="post-header">
    <a href="view-profile.php?id=<?php echo $userData['user_id']; ?>">
        <img src="uploads/<?php echo $userData['p_p']; ?>" class="border rounded-circle me-2" alt="Avatar" style="height: 40px">
    </a>
    <a href="view-profile.php?id=<?php echo $userData['user_id']; ?>" class="text-dark mb-0"> 
        <h3><?php echo $userData['name']; ?></h3>
    </a>
    <?php echo $row['feed_id']; ?>
    <p class="post-date">
        <?php echo $row['created']; ?>
        <span>
            <div class="dropdown">
                <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                <div class="dropdown-content">
                    <a href="#">Help</a>
                    <a href="#">Delete</a>
                    <a href="#">Edit</a>
                </div>
            </div>
        </span>
    </p>
</div>
<?php
        }  
    }
}
?>
</div>

JS部分（事件委托版本） #

// 处理下拉菜单点击
document.getElementById('feed-container').addEventListener('click', function(event) {
  if (event.target.matches('.fa-ellipsis-v')) {
    const dropdownMenu = event.target.parentElement.querySelector('.dropdown-content');
    document.querySelectorAll('.dropdown-content.show').forEach(menu => {
      if (menu !== dropdownMenu) menu.classList.remove('show');
    });
    dropdownMenu.classList.toggle('show');
  }
});

// 点击外部关闭所有下拉菜单
window.addEventListener('click', function(event) {
  if (!event.target.matches('.fa-ellipsis-v') && !event.target.closest('.dropdown-content')) {
    document.querySelectorAll('.dropdown-content.show').forEach(menu => {
      menu.classList.remove('show');
    });
  }
});

内容的提问来源于stack exchange，提问作者leatile mosimanyana