javascript - 如何在 JavaScript 中创建切换函数以在 HTML 中显示 div？

Question

我正在尝试创建一个“下拉”div。这个想法是，当您按下按钮时，div 的显示属性将更改为 BLOCK。我已经设法让 div 显示，但一旦用户再次单击按钮，我就无法让 div “隐藏”。单击按钮时，我调用一个 javascript 函数，它将获取元素 id 并将属性更改为 BLOCK。

这是我的 html，它是由 while 循环创建的。

 <?php

                        $sql="SELECT * FROM planservers WHERE plans_id = $planID";
                        $retServerNames = mysql_query($sql);
                        $buttonId=0;

                        While($row1=mysql_fetch_array($retServerNames)){

                            $serverID = $row1['id'];
                            $serverName = $row1['servername'];

    /**************this is my button.*******************/
                        echo"<input type='button' id='$buttonId' class='btn' name='show' value='".$serverName."' onclick='javascript:showServer(".$buttonId.");'
                                style='width: 90%; margin: 1%; text-align:left;'>";

                            echo"<div id='$serverName' style='margin: 3%; display:none;'>";

                            echo"<table style='border:none;' cellspacing='10px'>

                                                <thead>
                                                    <tr>
                                                        <th></th>
                                                        <th>Task</th>
                                                        <th>Status</th>
                                                        <th>Agent</th>
                                                        <th>Date Completed</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>";                              


                            $sql2="SELECT * FROM planservertasks WHERE plans_id =$planID and planservers_id=$serverID";



                            $reTasks = mysql_query($sql2);
                            $counter = 1;
                            while($row=mysql_fetch_array($reTasks)){

                                if($row['status'] == 0){

                                    $statusString = "Pending";
                                    $statColor = "<td id=".$row['id']." style='color:orange;font-weight: bold;'>";
                                }else{

                                    $statusString ="Completed";
                                    $statColor = "<td id=".$row['id']." style='color:green;font-weight: bold;'>";
                                    }




                                                echo"<tbody>
                                                    <tr>
                                                        <td>".$counter.".</td>
                                                        <td>".$row['taskname']."</td>
                                                        ".$statColor.$statusString."</td>
                                                        <td >".$row['completedby']."</td>
                                                        <td>".$row['completdate']."</td>
                                                        <td><input  type='button'  name='$serverName' value='Completed' onclick='javascript:completeTask(".$row['id'].");'></td>
                                                    </tr>
                                                </tbody>";
                                                $counter++;

                            }

                            echo"</table>";
                            echo"</div>";
                            $buttonId++;
                        }

                    ?>  

这是我的 JavaScript 函数。

 function showServer(buttonid)
        {   
            var servername = document.getElementById(buttonid).value;

            if(document.getElementById(servername).style.display = "none"){

                document.getElementById(servername).style.display = "block";


            }

        }

这是折叠 View 。 这是展开的 View 。

我需要能够再次单击带有服务器名称的蓝色按钮来折叠 div。我不确定是否需要更改我的 java 函数或我的 html。任何建议都会有所帮助。

Answer 1

非常不言自明

function showServer(buttonid)
        {   
            var servername = document.getElementById(buttonid).value;

            if(document.getElementById(servername).style.display == "none"){

                document.getElementById(servername).style.display = "block";


            }else { 

              document.getElementById(servername).style.display = "none"; }

        }