Question

我正在为台湾人口普查数据建立在线互动地图，我有一个javascript问题。

地图采用页面的整个宽度和高度，但是当单击两个div时（click_1956并单击_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]
        }]
    });
});

}）;

Answer 1

打开一个div时，查找打开的div并关闭它们。这样一次只能打开一个div。

当你关闭一个已打开的div时，不再有任何其他已打开的div;）

这是一些伪代码：

＆＃13;

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

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

Answer 2

我建议的不是使用slidetoggle，而是使用show和hide，这将使您的工作更轻松。在关闭1956标签时，我正在做什么，我选择所有以id chart_19开头并关闭所有div的div。您可以在所有点击功能中使用相同的代码段来使其正常工作。

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

Javascript和JQUERY：使用单击功能打开和关闭div

2 个答案: