2015-06-17 175 views
0

我正在建立臺灣人口普查數據的在線交互式地圖,我有一個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] 
     }] 
    }); 
}); 

});

+0

你的第一codebox(開始用CSS)似乎含有其他兩個盒子的內容。 你還可以添加HTML嗎? 您可能想向我們展示您目前使用Runnable Code Snippets的內容:http://blog.stackoverflow。com/2014/09/introduction-runnable-javascript-css-and-html-code-snippets/ – BillyNate

+0

我在哪裏可以編輯我的問題,以包含與我的代碼的Runnable代碼片段的鏈接? – leviwest

+0

嘗試https://jsfiddle.net/,在那裏你可以發佈你的代碼並分享鏈接 – Jayababu

回答

0

當打開一個div時,查找打開的div並關閉它們。這樣一次只能打開一個div。

當您關閉打開的DIV不會有其他任何打開的DIV了;)

下面是一些僞代碼:

jQuery().ready(function() 
 
{ 
 
    $('.openable').click(function() 
 
    { 
 
    if(!$(this).hasClass('opened')) 
 
    { 
 
     $(this).animate({ width: '90%', height: '100%' }, 500).addClass('opened').siblings('.openable.opened').animate({ width: '10%', height: '100px' }).removeClass('opened') 
 
    } 
 
    else 
 
    { 
 
     $(this).animate({ width: '10%', height: '100px' }).removeClass('opened'); 
 
    } 
 
    }); 
 
});
html, body, #container { width: 100%; height: 100%; } 
 
.openable { position: absolute; right: 0; top: 0; width: 10%; height: 100px; background-color: #00f; } 
 
.openable:first-child { left: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="openable" id="one"></div> 
 
    <div class="openable" id="two"></div> 
 
</div>

+0

謝謝。我一直沒有能夠寫,如果我的JavaScript語句,並得到它的工作.. – leviwest

+0

爲您增加了一些代碼;) – BillyNate

+0

我試圖將它集成到我自己的代碼中,並有一些困難。我嘗試使用Runnable Code Snippets,但我的代碼鏈接到我的計算機上託管的很多geojson文件,而我似乎無法包含這些文件。 – leviwest

0

什麼,我可以建議是而不是使用slidetoggle,請使用showhide這將使您的工作更輕鬆。 雖然關閉1956年選項卡什麼是做的是,我選擇所有的div開頭與ID chart_19並關閉所有的。 您可以在所有點擊功能中使用同一段代碼來使其工作。

$('#click_1956').click(function() {..................}); 
$('#click_1955').click(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").show(100); 
    } else { 
    $("#map").animate({ 
    width: "20.5%" 
    }, 300); 
    $('#charts_container_1956').animate({ 
     width: "79.5%" 
    },300); 
    $('div[id^="chart_19"]').hide(1000) 
    } 
    $(this).data("clicks", !clicks); 
    }); 
    }); 
+0

工作。但是,如果我的圖表已經打開過一次,而且我想通過再次點擊顯示出來而不是顯示它,它會關閉所有div。 – leviwest

+0

$(文件)。就緒(函數(){\t \t $( '#click_1956')點擊(函數(){ \t VAR點擊= $(本)。數據( '點擊'); \t如果(點擊次數){ \t $( 「#地圖」)動畫({ \t \t寬度: 「100%」 \t},300); \t \t $( '#charts_container_1956')動畫({ \t \t \t寬度:「0」 \t \t},300); \t \t $(「#chart_1956」)。hide(100); \t \t $( '的div [ID^= 「chart_19」]')隱藏(100) \t}否則{ \t $( 「#地圖」)動畫({ \t \t寬度: 「20.5%」 300); \t \t $( '#charts_container_1956')動畫({ \t \t \t寬度: 「79.5%」 \t \t},300)。 (「clicks」,!clicks);(「#」);(點擊數);(點擊數)。 \t}); }); – leviwest