折叠底部面板以搜索结果

Question

我想就如何实现以下目标提供简要指导：

我在屏幕顶部的导航栏上有一个搜索输入。我希望用户键入一个关键字，当他按下[enter]时，会显示一个折叠面板，其中显示的搜索结果将从下到上显示，覆盖上面显示的地图的下部区域。

面板上应该有一个切换按钮，因此用户可以将其折叠回底部并显示整个地图。

哪个是使用Bootstrap 3和纯CSS创建这种布局的最佳解决方案？

Answer 1

我不认为你可以用css做你想做的事，因为你需要点击和输入一些事件，但jquery做你想做的事情很容易使用/理解。

你可能不想要这个答案，但它可以帮助其他人，所以我们在这里。

首先是这个html的基本布局

<div class="top"></div>
<div class="side"></div>
<div class="container"></div>

和css：

body, html {margin:0; height:100%;}
.top {
  height:40px;
  background-color:#ddd;
}
.side {
  height:calc(100% - 40px);
  float:left;
  width:200px;
  background-color:#000;
}
.container {
  height:calc(50% - 40px);
  float:left;
  width:calc(100% - 200px);
  background-color:red;
  position:relative;
  transition: height 0.4s linear;
}

在您的照片中，红色容器就是您的地图。

然后我在容器内添加了“折叠”按钮，并将其定位为绝对位置，使其位于容器的底部，右侧。

在点击时添加事件的时间只是为了向容器添加一个类：

$('.button').click(function () {
    $('.container').toggleClass("container-full"); 
});

以及这个新类的属性：

.container-full {
  height:calc(100% - 40px);
}

如果点击按钮会使红色元素填满窗口，如果再次点击则会返回窗口。

然后我已将input type="search"添加到top容器中，并添加了此jquery：

$('input').keypress(function(e){
        if(e.which == 13){//Enter key pressed
            $('.button').click();//Trigger search button click event
        }
    });

现在，当您在输入中按“输入”时，我已经对“崩溃”按钮进行的​​功能将会发生。

<强> JSFIDDLE

$('.button').click(function () {
    $('.container').toggleClass("container-full"); 
});

$('input').keypress(function(e){
        if(e.which == 13){//Enter key pressed
            $('.button').click();//Trigger search button click event
        }
    });

body, html {margin:0; height:100%;}
.top {
  height:40px;
  background-color:#ddd;
}
.side {
  height:calc(100% - 40px);
  float:left;
  width:200px;
  background-color:#000;
}
.container {
  height:calc(50% - 40px);
  float:left;
  width:calc(100% - 200px);
  background-color:red;
  position:relative;
  transition: height 0.4s linear;
}
.container-full {
  height:calc(100% - 40px);
}
.button {
  height:20px;
  width:60px;
  background-color:#bbb;
  position:absolute;
  bottom:0;
  right:0;
}
input {margin:10px 0 0 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="top">
  <input type="search">
</div>
<div class="side"></div>
<div class="container">
    <div class="button"></div>
</div>