我正在建立臺灣人口普查數據的在線交互式地圖,我有一個JavaScript問題。Javascript和JQUERY:使用點擊功能打開和關閉div
地圖佔用了頁面的全部寬度和高度,但是當單擊兩個div(click_1956和click_1966)時,頁面右側會打開兩個容器,並且地圖的寬度會相應縮小。
在這些容器中顯示圖表。每個容器都有一個容納圖形的div。
一切正常,但如果我單擊click_1956並打開chart_container_1956,然後單擊click_1966並打開chart_container_1966,當再次單擊click_1966關閉chart_container_1966時,則chart_container_1956仍處於打開狀態。我希望在關閉任何容器時關閉所有容器。
我希望這是有道理的。我粘貼下面的代碼。如果沒有意義,我很抱歉。這是我第一次使用這個網站。謝謝!
CSS
#charts_container_1956 {
position:absolute;
bottom:0;
width:0;
height:100%;
z-index:10;
background:#FAFAFF;
display:none;
}
#chart_1956 {
position:absolute;
bottom:0px;
top:0;
width:78%;
height:100%;
float:left;
left:21%;
z-index:1000;
background:#B6CEFF;
display: none;
}
#click_1956{
width:25px;
height:25px;
opacity:0.85;
background-image:url("images/chart.png");
background-size:100%;
background-repeat:no-repeat;
background-position:center;
cursor: pointer;
margin-left:10px;
margin-bottom:6px;
}
#click_1956:hover {
background-color: #B6CEFF;
}
#charts_container_1966 {
position:absolute;
bottom:0;
width:0;
height:100%;
z-index:10;
background:#FAFAFF;
display:none;
}
#chart_1966 {
position:absolute;
bottom:0px;
top:0;
width:78%;
height:100%;
float:left;
left:21%;
z-index:1000;
background:#B6CEFF;
display: none;
}
#click_1966{
width:25px;
height:25px;
opacity:0.85;
background-image:url("images/chart.png");
background-size:100%;
background-repeat:no-repeat;
background-position:center;
cursor: pointer;
margin-left:10px;
margin-bottom:6px;
}
#click_1966:hover {
background-color: #B6CEFF;
}
的Javascript
$(document).ready(function(){
$('#click_1956').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("#map").animate({
width: "100%"
}, 300);
$('#charts_container_1956').animate({
width: "0"
},300);
$("#chart_1956").fadeToggle(100);
} else {
$("#map").animate({
width: "20.5%"
}, 300);
$('#charts_container_1956').animate({
width: "79.5%"
},300);
$("#chart_1956").fadeToggle(1000)
}
$(this).data("clicks", !clicks);
});
});
$(function() {
var categories = ['0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '];
$(document).ready(function() {
$('#chart_container_1956').highcharts({
chart: {
type: 'bar'
},
title: {
text: '人口金字塔'
},
subtitle: {
text: '1956年'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function() {
return (Math.abs(this.value)/1000000) + 'M';
}
},
min: -2000000,
max: 2000000
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: '男',
data: [-930097, -708733, -478299, -487623, -336419, -362280, -325520, -281719, -251974, -205500, -153693, -109738, -71686, -47206, -45708, -0, -0, -0, -0, -0, -0]
}, {
name: '女',
data: [886484, 670598, 448470, 463230, 403966, 356909, 297371, 240970, 203159, 173283, 133860, 105011, 74621, 57448, 78806, 0, 0, 0, 0, 0, 0]
}]
});
});
});
$(document).ready(function(){
$('#click_1966').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("#map").animate({
width: "100%"
}, 300);
$('#charts_container_1966').animate({
width: "0"
},300);
$("#chart_1966").fadeToggle(100);
} else {
$("#map").animate({
width: "20.5%"
}, 300);
$('#charts_container_1966').animate({
width: "79.5%"
},300);
$("#chart_1966").fadeToggle(1000)
}
$(this).data("clicks", !clicks);
});
});
$(function() {
var categories = ['0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '];
$(document).ready(function() {
$('#chart_container_1966').highcharts({
chart: {
type: 'bar'
},
title: {
text: '人口金字塔'
},
subtitle: {
text: '1966年'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function() {
return (Math.abs(this.value)/1000000) + 'M';
}
},
min: -2000000,
max: 2000000
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: '男',
data: [-1018498, -996308, -919856, -682964, -324702, -461254, -430342, -436479, -377743, -306094, -261970, -185797, -127501, -79309, -43250, -20839, -11100, -0, -0, -0, -0]
}, {
name: '女',
data: [959981, 943937, 872920, 671050, 446428, 458478, 399311, 354333, 293547, 234241, 195507, 161451, 119448, 86079, 54002, 32911, 25133, 0, 0, 0, 0]
}]
});
});
});
你的第一codebox(開始用CSS)似乎含有其他兩個盒子的內容。 你還可以添加HTML嗎? 您可能想向我們展示您目前使用Runnable Code Snippets的內容:http://blog.stackoverflow。com/2014/09/introduction-runnable-javascript-css-and-html-code-snippets/ – BillyNate
我在哪裏可以編輯我的問題,以包含與我的代碼的Runnable代碼片段的鏈接? – leviwest
嘗試https://jsfiddle.net/,在那裏你可以發佈你的代碼並分享鏈接 – Jayababu