我有一个位于全局导航底部的选项卡。 我希望该选项卡在点击时展开和收缩,最好不要使用 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>
最佳答案
这是一个简单的示例,说明如何使用 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>
关于css - 下拉/切换的选项卡菜单(纯 css/html),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37395773/