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/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

删除/切换的标签菜单（纯css / html）

1 个答案: