1

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

7 回答 7

2

尝试：

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

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

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

于 2012-04-10T20:04:55.247 回答
1

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

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

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

于 2012-04-10T20:04:16.367 回答
0

您应该使用 common 类和 visible 来选择所有并首先隐藏它们。

$('.m_box').click(function(){
    $('.m_box:visible').hide();
    $(this).show();
});
于 2012-04-10T20:02:13.857 回答
0

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

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

于 2012-04-10T20:02:27.683 回答
-1

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

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

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

      //index a integer value

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

});
于 2012-04-10T20:08:21.050 回答
-1

您可以尝试在单击事件时使用 jQuery 淡入和淡出 div。这是一个例子；

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

这意味着，当 div click me 被点击时，它会在 book div 中淡出或淡出

于 2012-04-10T20:01:24.200 回答
-1

您可以关闭其他 div 检查它们是否使用 :visible 选择器http://api.jquery.com/visible-selector/打开

于 2012-04-10T20:00:19.173 回答