单击后如何在另一个div上显示div

Question

点击按钮后我想要一种叠加效果。这是在单击底部三角形之前的样子：

然后点击后，它应该如下所示：

我觉得这可以用jQuery完成，但我还没想到它。有人能指出我正确的方向吗？

Answer 1

作为一个棒球场回答（根据已经给出的信息...），我建议制作一个绝对定位（和大小！）的div，它出现在内容的顶部（不要担心节目/暂时隐藏...

一旦你把它钉在了你想要的地方。

然后点击事件使用：

$('selector').toggle()

将管理它的显示和隐藏。

要隐藏它，对于元素的CSS，给它一个display：none; - Jquery将在显示元素时添加Display:block，然后将覆盖CSS文件中的属性。

Answer 2

这是非常基本的jquery。

// address the arrow button with an #id or .class
$('#arrow_button').click(function(){
    $('#overlay').toggle();
});

Answer 3

这是你想要实现的吗？

$('.buttons button').click(function(){
    var $this = $(this);
    $('.tabs .active').hide('drop',function(){
        $(this).removeClass('active');      
        $('.tabs div:eq('+$this.index()+')').show('fade').addClass('active');        
    });    
    
});

.tabs{
    height:300px;
}
.tab{
    height:250px;
    display:none;
    border:solid blue thick;
    background-color:#88a;
}
.tab.active{
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="tabs">
    <div class="tab active">Content1</div>
    <div class="tab">Content2</div>
    <div class="tab">Content3</div>
</div>
<div class="buttons">
    <button>content 1</button>
    <button>content 2</button>
    <button>content 3</button>
</div>