我想在点击另一个DIV时显示一个DIV。我是JQuery的新手,只想使用CSS,但由于我使用PHP来循环显示所有创建的DIV,因此我需要使用JQuery分别显示隐藏的DIV。当如何使用JQuery切换功能在点击时显示/隐藏DIV?
HTML点击:上desk_box节目点击station_info有点侧面时这样用户可以untoggle它
<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/
你的代码工作,你只需要在页面左侧的菜单中包括jQuery:http://jsfiddle.net/qmeepb36/2/ – 2014-10-07 19:36:31
是在小提琴它的作品,但对我来说它不?我在
上包含了,该文件位于我的PHP文件的同一目录中。任何想法? – mario 2014-10-07 19:40:11你检查了控制台是否有错误? – 2014-10-07 20:16:36