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

我正在建立台湾人口普查数据的在线交互式地图，我有一个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] 
     }] 
    }); 
});

}）;

来源

2015-06-17 leviwest

你的第一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

当打开一个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>

来源

2015-06-17 07:35:10 BillyNate

谢谢。我一直没有能够写，如果我的JavaScript语句，并得到它的工作.. – leviwest

为您增加了一些代码;） – BillyNate

我试图将它集成到我自己的代码中，并有一些困难。我尝试使用Runnable Code Snippets，但我的代码链接到我的计算机上托管的很多geojson文件，而我似乎无法包含这些文件。 – leviwest

什么，我可以建议是而不是使用slidetoggle，请使用show和hide这将使您的工作更轻松。虽然关闭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); 
    }); 
    });

来源

2015-06-17 07:54:07 Jayababu

工作。但是，如果我的图表已经打开过一次，而且我想通过再次点击显示出来而不是显示它，它会关闭所有div。 – leviwest

$（文件）。就绪（函数（）{\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

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

回答

相关问题