我有一组 div,当我单击一个时,它应该打开那个特定的,并关闭所有其他打开的。如果有的话,应该只有一个开放的 div。难以排除我点击关闭的那个。有人有什么想法吗?Javascript和HTML遵循:
$('.m_box').hide();
$('.a_box').hide();
$('#m2012').click(function(){
//$('.m_box').hide();
$('#m2012_box').toggle();
});
$('#m2011').click(function(){
//$('.m_box').hide();
$('#m2011_box').toggle();
});
$('#m2010').click(function(){
//$('.m_box').hide();
$('#m2010_box').toggle();
});
<div id="m2012" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;">
<div id="m2012_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;">
<div class="list_header">
<p>2012</p>
</div>
<div class="items">
<div class="list_item">
Milestone 1
</div>
<div class="list_item">
Milestone 2
</div>
<div class="list_item">
Milestone 3
</div>
<div class="list_item">
Milestone 4
</div>
<div class="list_item">
Milestone 5
</div>
<div class="list_item">
Milestone 6
</div>
</div>
</div>
</div>
<div id="m2011" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;">
<div id="m2011_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;">
<div class="list_header">
<p>2011</p>
</div>
<div class="items">
<div class="list_item">
Milestone 1
</div>
<div class="list_item">
Milestone 2
</div>
<div class="list_item">
Milestone 3
</div>
</div>
</div>
</div>
<div id="m2010" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;">
<div id="m2010_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;">
<div class="list_header">
<p>2010</p>
</div>
<div class="items">
<div class="list_item">
Milestone 1
</div>
<div class="list_item">
Milestone 2
</div>
<div class="list_item">
Milestone 3
</div>
</div>
</div>
</div>