Question

我在这样一个范围内的Div中有一个Div：

<div id="container">
<a class="tooltips" href="#">XBOX
    <span class="tooltip-container">
        <div class="tooltip-item">Controller</div>
        <div class="tooltip-item">Console
            <div class="filter-item">In Stock</div>
            <div class="filter-item">Pre-Order</div>
        </div>
        <div class="tooltip-item">Kinect</div>
    </span>
</a>

<a class="tooltips" href="#">PS4
    <span class="tooltip-container">
        <div class="tooltip-item">Controller</div>
        <div class="tooltip-item">Console</div>
    </span>
</a>

</div>

我添加了一个显示或隐藏div的点击功能。当我单击外部div中的项目时，我想在内部div中展开另一个过滤项目列表。换句话说，当我点击“XBOX”时，它会展开，如果我点击“控制台”，它将展开以显示更多项目。我怎样才能做到这一点？下面列出的jsfiddle示例。

jsfiddle.net example

Answer 1

下面：

小提琴：http://jsfiddle.net/zNV8T/

主要的变化是在JS ......

$(window).on('load',function(){
    //click PS4 or XBOX
    $('.tooltips').click(function(){
        if ($(this).find('.tooltip-container').css('display') == 'none') {
            //first deactivate any active tooltip
            $('.tooltip-container').hide();
            $('.tooltips').removeClass('clickedSortFilter');
            //then activate the clicked tooltip
            $(this).find('.tooltip-container').show();
            $(this).addClass('clickedSortFilter');
        } else {
            //deactivate the clicked tooltip
            $(this).find('.tooltip-container').hide();
            $(this).removeClass('clickedSortFilter');
        }
    });

    //expand tooltip-item if it contains filter-item
    $('.tooltip-item').click(function(e){
        e.stopPropagation();
        if ($(this).children().length > 0) {
            if ($(this).find('.filter-item').css('display') == 'none') {
                //first deactivate any active tooltip-item
                $('.tooltip-item').css('z-index','0');
                $('.filter-item').hide();
                //then activate the clicked tooltip-item
                $(this).css('z-index','1');
                $(this).find('.filter-item').show();
            } else {
                //deactivate the clicked tooltip-item
                $(this).find('.filter-item').hide();
            }
        }
    });
});

...虽然我也在CSS中做了一些更改，但在一两个地方添加了position:relative和display:none，并在某处删除了z-index。

我认为代码中的注释很好地解释了一般功能，如果你不理解某些细节，只需在评论中问我，我会尽力澄清（我已经修复了clickedSortFilter类到tooltips太顺便了。）

UPDATE：

这是一个更新的小提琴： http://jsfiddle.net/FAZLu/

spans更改为divs，对齐方式已修复（我会这样做，请参阅其他选项的注释）。
我还清理了很多CSS。

slideToggle内部Div在单击外部Div时

1 个答案:

UPDATE：