请问:怎么让一个div点击按钮时在其他元素的上方弹出显示
2个回答
展开全部
原理跟你讲下吧 这个用模拟的话,首先你要定义一个大的div 定义position:relative;
然后上面那个列表不管用div还是用ul 主要就是定义个position:absolute;bottom:20px;/****这个是重点***/其他属性参数自己另外设置,js就是点击按钮触发 展开方式就简单 了。
<style>
.Box{width:100px;positioN:relative;}
.D{display:none;widtH:100%;position:absolute;bottom:20px;left:0px;}
.D li{heighT:20px;background:#ccc;line-heighT:20px;margin-top:1px;}
</style>
<div class="Box">
<input type="button" value="点击" id="1" style="position:absolute;bottom:0px;"/>
<ul class="D">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script type="text/javascript">
$('input#1').click(function(){
$(this).siblings('ul').slideToggle(50);
})
$('.D').mouseout(function(){$(this).slideUp(50);})
</script>
这个是简单的方法,具体需要优化的地方还需要视情况而定。
然后上面那个列表不管用div还是用ul 主要就是定义个position:absolute;bottom:20px;/****这个是重点***/其他属性参数自己另外设置,js就是点击按钮触发 展开方式就简单 了。
<style>
.Box{width:100px;positioN:relative;}
.D{display:none;widtH:100%;position:absolute;bottom:20px;left:0px;}
.D li{heighT:20px;background:#ccc;line-heighT:20px;margin-top:1px;}
</style>
<div class="Box">
<input type="button" value="点击" id="1" style="position:absolute;bottom:0px;"/>
<ul class="D">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script type="text/javascript">
$('input#1').click(function(){
$(this).siblings('ul').slideToggle(50);
})
$('.D').mouseout(function(){$(this).slideUp(50);})
</script>
这个是简单的方法,具体需要优化的地方还需要视情况而定。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询