javascript - 如何使用 JQuery 切换功能在单击时显示/隐藏 DIV？

Question

我试图在单击另一个 DIV 时显示一个 DIV。我是 JQuery 的新手，只想使用 CSS，但由于我使用 PHP 循环遍历我的数据库以显示创建的所有 DIV，因此我需要使用 JQuery 单独显示隐藏的 DIV。当点击

HTML:当点击 desk_box 时，将 station_info 显示到一边，以便用户可以取消切换

<div id="map_size" align="center">
    <div id='desk_box' style='position:absolute;left:20px;top:60px;'>id:84</div>


    <div id='station_info' style='position:absolute;left:20px;top:60px;'>Hello the id  is:203</br>Section:Section C</br></div>

<script type="text/javascript">
                $(document).ready(
            function(){
            $("#desk_box").click(function () {
            $("#station_info").toggle();
            });
            });
        </script>

</div><!--map size-->

CSS:

/*body*/
body{
margin:0px auto;
width:80%;
height:80%;
}

/*map size*/
#map_size{
width:1190px;
height:1300px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
}

/* desk boxes*/
#desk_box{ 
width: 23px;
height: 10px;
border: 4px solid black; 
padding:10px;
}   

/*station info*/    
#station_info {
display: none;
width:150px;
height:150px;
border:4px solid black;
background-color:white;
}

#desk_box:hover ~ .station_info {
display: block;
}

PHP:

<?php
include 'db_conn.php';

//query to get X,Y coordinates from DB for the DESKS
$coord_sql = "SELECT coordinate_id, x_coord, y_coord FROM coordinates";
$coord_result = mysqli_query($conn,$coord_sql);

//see if query is good
if($coord_result === false) {
    die(mysqli_error()); 
}
/*************************************/
//query to show workstation/desks information from DB for the DESKS
$station_sql = "SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates";
$station_result = mysqli_query($conn,$station_sql);

//see if query is good
if($station_result === false) {
    die(mysqli_error()); 
}
?>
<?php
                    //get number of rows for X,Y coords in the table
                    while($row = mysqli_fetch_assoc($coord_result)){    
                        //naming X,Y values
                        $id    = $row['coordinate_id'];
                        $x_pos = $row['x_coord'];
                        $y_pos = $row['y_coord'];

                        //draw a box with a DIV at its X,Y coord     
                        echo "<div id='desk_box' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$id."</div>";
                } //end while coord_result loop

    while($row = mysqli_fetch_assoc($station_result)){
        $id       = $row['coordinate_id'];
        $x_pos    = $row['x_coord'];
        $y_pos    = $row['y_coord'];
        $sec_name = $row['section_name'];

    echo "<div id='station_info'style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id."</br>Section:".$sec_name."</br></div>";
                    }
                ?>

JSfiddle:http://jsfiddle.net/qmeepb36/

Answer 1

您的代码似乎有效，在 jfiddle 中只需从“Frameworks & Extensions”中选择，jquery 而不是没有库