javascript - 点击特定类触发下拉事件

Question

我该如何解决这个问题？我已经使用 php 来显示数据库中的数据，但我没有预见到这个错误。当我单击齿轮图标时，将出现两个下拉菜单。我怎样才能解决这个问题？我想要的是，当我单击特定元素的齿轮时，只会出现一个下拉列表。我希望你能帮助我，它困扰了我好几天。谢谢!!

这是我的代码:

PHP 代码:

if ($level == "Level 1"){
                $sql = "SELECT * FROM project";
                $result = mysqli_query($conn,$sql);
                $count = mysqli_num_rows($result);

                if ($count > 0) {
                    while ($row = mysqli_fetch_array($result)) {
                        echo "<input type='hidden' id='".$row['project_id']."'>";

                        echo "<div class='col-3'>";
                        echo "<div class='card'>";
                        echo "<div class='row'>";
                        echo "<div class='col-2'>";
                        echo "<h6 class='card-title'>".$row['project_name']."</h6>";
                        echo "</div>";
                        echo "<div class='col-2'>";
                        echo "<div class='card-setting'><i class='fa fa-gear'></i></div>";
                        echo "<div id='card-setting-dropdown' class='card-dropdown-content'>";
                        echo "<button class='card-dropdown-menu' id='delete_project'>Delete Project</button>";
                        echo "<button class='card-dropdown-menu' id='add_task'>Add Task</button>";
                        echo "</div>";
                        echo "</div>";
                        echo "</div>";
                        echo "<div class='row'>";
                        echo "<div class='col-2'>";
                        echo "<label  class='project-details'>".$row['department']."</label>";
                        echo "</div>";
                        echo "<div class='col-2'>";
                        echo "<label class='project-details' style='float:right;'>Priority: ".$row['priority']."</label>";
                        echo "</div>";
                        echo "</div>";
                        echo "<div class='pr-task-data'>";
                        echo "<div class='pr-task-summary-l'>";
                        echo "<label class='pr-task-title'>Tasks</label>";
                        echo "<p class='pr-task-details'>12</p>";
                        echo "</div>";
                        echo "<div class='pr-task-summary-l'>";
                        echo "<label class='pr-task-title'>Completed</label>";
                        echo "<p class='pr-task-details'>5</p>";
                        echo "</div>";
                        echo "<div class='pr-task-summary-l'>";
                        echo "<label class='pr-task-title'>In-Progress</label>";
                        echo "<p class='pr-task-details'>2</p>";
                        echo "</div>";
                        echo "<div class='pr-task-summary-r'>";
                        echo "<label class='pr-task-title'>Not Completed</label>";
                        echo "<p class='pr-task-details'>5</p>";
                        echo "</div>";
                        echo "</div>";
                        echo "<div class='progress'>";
                        echo "<div class='progress-bar'>";
                        echo "<label class='progress-bar-percent'>50%</label>";
                        echo "</div>";
                        echo "</div>";
                        echo "</div>";
                        echo "</div>";
                    }
                }
            }

脚本:

//Card-Settings Dropdown
$(".card-setting").click(function() {
    $(".card-dropdown-content").toggleClass("card-dropdown-content-show");
    $(this).toggleClass("card-setting-active");
}); 

Answer 1

当脚本激活时，您可以切换所有卡片的 car-dropdown-content-show 类。您应该只关注卡片内的内容，并找到具有 card-dropdown-content 类的内容:

$(".card-setting").click(function() {
    var $this = $(this);
    $this.parent().find(".card-dropdown-content").toggleClass("card-dropdown-content-show");
    $this.toggleClass("card-setting-active");
});

我们首先需要找到父级，因为查找会遍历所有后代，具有card-dropdown-content类的div是同级。