单击特定类以触发下拉事件

Question

我该如何解决这个问题？我用php来显示数据库中的数据，但我没有预见到这个bug。 当我点击齿轮图标时，会出现两个下拉菜单。我怎样才能解决这个问题？我想要的是当我点击特定项目的装备时，只会出现一个下拉列表。我希望你能帮我一直困扰我好几天。谢谢!!

这是我的代码：

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是兄弟。

Answer 2

您需要找到点击装备的相关元素。

试试这个：

$('.card-setting').on('click', function () {
   var $this = $(this) ;

   $this.next().toggleClass("card-dropdown-content-show");
   $this.toggleClass("card-setting-active");
});