Javascript 和 JQUERY : opening and closing divs using click function

Question

我正在为台湾人口普查数据构建在线交互式 map ，我有一个 javascript 问题。

map 占据了页面的全部宽度和高度，但当单击两个 div(click_1956 和 click_1966)时，页面右侧会打开两个容器， map 的宽度会相应缩小。

在这些容器中显示图表。每个容器内部都有一个存放图表的 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]
        }]
    });
});

});

Answer 1

我的建议是不要使用 slidetoggle，而是使用 show 和 hide 这将使您的工作更轻松。在关闭 1956 选项卡时，我正在做的是选择所有以 id chart_19 开头的 div，然后关闭所有这些。您可以在所有点击功能中使用同一段代码来使其工作。

 $('#click_1956').click(function() {..................});
$('#click_1955').click(function() {..................});

Code changes

$('#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);
   });
  });