Question

我有一组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>

Answer 1

尝试：

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

证明：http://jsfiddle.net/iambriansreed/J97Kq/

为清晰起见，我的小提琴删除了你的内联CSS。

Answer 2

要从选择器中排除点击的div的子项（我看到的唯一），您可以使用not：

$('#m2012, #m2011, #m2010').click(function() {
    $('.m_box').not($(this).children().show()).hide();
});

UPD：修改了代码，以便打开孩子。

Answer 3

您应该使用公共类和可见组来选择所有并首先隐藏它们。

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

Answer 4

有两个很棒的预构建jQuery库可以解决这个问题：

jQuery Tools（特别是tabs功能，可以作为accordion实施）
jQuery UI也有accordion功能

jQuery Tools将提供最大的灵活性，实现这一点应该相对简单。 jQuery UI在某种程度上强迫某种样式，因此如果你想使用库，Tools可能是正确的方法。

Answer 5

您可以关闭其他div，检查是否使用：visible selector http://api.jquery.com/visible-selector/

打开它们

Answer 6

你可以尝试在点击事件中使用jQuery fadeIn和fadeOut div。这是一个例子;

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

这意味着，当单击div点击我时，它会淡出或淡入书籍div

Answer 7

你应该使用一个选择器来关闭所有具有某个索引的div，这个选择器会关闭索引大于1的所有div。

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

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

      //index a integer value

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

});

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

7 个答案: