html - 折叠搜索结果的底部面板

Question

我想获得有关如何实现以下目标的简要指导:

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

该面板应附有一个切换按钮，以便用户之后可以将其折叠回底部并显示整个 map 。

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

它看起来像您图片中的红色容器是您的 map 。

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

是时候添加点击事件，只是为了向容器添加一个类:

$('.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
        }
    });

现在，当您在输入框内按下“enter”时，我已经为“折叠”按钮设置的功能将会发生。

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>