css - 下拉/切换的选项卡菜单(纯 css/html)

Question

我有一个位于全局导航底部的选项卡。我希望该选项卡在点击时展开和收缩，最好不要使用 jquery。当选项卡展开时，它将包含一个带有垂直链接的列表，并且选项卡应该贴在展开列表的底部。我在网上看了很多地方找到类似的东西，但一直无法找到我想要实现的目标。移动友好会很好，需要在区域外点击时切换。

这是选项卡的 css。

.findprod {
    position: absolute;
    top: 11.5vw;
    background-color:rgba(0, 0, 0, 0.5);
    text-decoration: none;
    text-align:center;
    right:7vw;
    top-padding:-.7vw;
    margin:-.7vw;
    width:10.75vw;
    font-family: Lato;
    color: white;
    font-size: .88vw;
    font-weight: 400;
    line-height: 3.1vw;
    border: none;
    -webkit-border-radius: 0 1px 22px 22px;
    border-radius: 0 1px 22px 22px;
    white-space: nowrap;
    overflow: hidden;
    z-index:1;
    }

html: <div class="findprod"> Find a Product </div>

Answer 1

这是一个简单的示例，说明如何使用 jQuery 执行此操作。

参见:https://jsfiddle.net/552xrcf3/

$('.findprod').click(showHide);

function showHide(){
	$('#list').slideToggle();
}

.findprod {
    background-color:rgba(0, 0, 0, 0.5);
    text-align:center;
    color: white;
    font-family: sans-serif;
    display: inline-block;
    padding: 20px 30px;
    border-radius: 0 0 40px 40px;
    cursor: pointer;
}

#list{
    display: none;
    list-style-type: none;
    font-family: sans-serif;
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
	<li>Rocks</li>
	<li>Pipes</li>
	<li>Cookies</li>
	<li>Office Supplies</li>
	<li>Fireworks</li>
</ul>
<div class="findprod"> Find a Product</div>