折叠搜索结果的底部面板

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;
}

它看起来像你图片中的红色容器是你的地图。

然后我在容器内添加了 "collapse" 按钮并将其定位为绝对位置，因此它位于容器的底部右侧。

是时候添加点击事件了，只是为了向容器中添加一个 class：

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

以及这个新 class 的属性：

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

单击按钮时红色元素填充 window，再次单击返回。

然后我将您的 input type="search" 添加到 top 容器中，并且我添加了这个 jquery:

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

现在，当您在输入框内按下 "enter" 时，我已经为 "collapse" 按钮设置的功能将会生效。

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>

折叠搜索结果的底部面板

Collapsing bottom panel for search results

html

css

panel

twitter-bootstrap