jquery - 单击后如何在另一个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>