jQuery-单击一个div，关闭所有其他问题

我有一组div，当我点击其中一个时，它会打开那个特定的div，并关闭所有其他打开的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>

---

您可以关闭其他div，检查它们是否已使用：visible选择器打开。您可以尝试使用jQuery淡出并淡出div，单击事件。这是一个例子

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

---

这意味着，当单击div click me时，它将在book div中淡出或淡出。您应该使用common类和visible来选择all并首先隐藏它们

$('.m_box').click(function(){
    $('.m_box:visible').hide();
    $(this).show();
});

---

有两个很好的预构建jQuery库可以处理这个问题：

特别是功能，它可以作为 它也有一个功能

---

jQuery工具将允许最大的灵活性，实现这一点应该相对简单。jQuery UI在某种程度上强制了某种样式，因此如果您想使用库，工具可能是正确的方法。

要排除单击的div的子项，我从选择器中看到，您不能使用：

UPD：修改代码以打开子项。

尝试：

$('.list_header').click(function() {
    $(this).parent().parent().siblings().find('.items').hide();
    $(this).siblings().show();    
});​

证明：

---

为了清晰起见，My fiddle删除了您的内联CSS。

您应该使用选择器关闭具有特定索引的所有div，如下所示，此选择器关闭索引大于1的所有div

 $('#m2012').click(function(){

 $('#m2012_box').toggle();

      //index a integer value

     $("div:gt(1)").hide();

});

---

但这不符合OP的要求。当一个部分打开时，他想关闭所有部分，对吗？这看起来不是答案。以评论的形式发布，而不是作为答案。从如何提问：你的问题的答案可能并不总是你想要的，但这并不意味着它是错的。这是对这个问题的回答。它解决了问题，即使这不是Dave所要求的。此外，即使这不是Dave所要求的，也可能与通过搜索发现此问题的其他人相关。这就做到了！以及：$'name\u of_div'。切换；排除单击的div，然后切换说div正是我所需要的。谢谢。当它被接受时，这个答案不起作用@达维罗蒂诺为什么不看看投票率最高的答案？

 $('#m2012').click(function(){

 $('#m2012_box').toggle();

      //index a integer value

     $("div:gt(1)").hide();

});