怎么用js或jq点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来?

JavaScript014

怎么用js或jq点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来?,第1张

[ h1 ^]\x0d\x0a||\x0d\x0a|div1 |\x0d\x0a||\x0d\x0a\x0d\x0a如图所示:h1是你说贴出的两个图(展开、收起)\x0d\x0adiv1是你要展开后弹出的层\x0d\x0a\x0d\x0a$("#h1").click(function () {\x0d\x0a$("#div1").toggle("slow",function () {\x0d\x0aif ($(this).attr("style").toLowerCase().indexOf("none") == -1) {\x0d\x0a$("#imgBasicInfo").attr("src", "../../Images/BarUp.gif")\x0d\x0a}\x0d\x0aelse {\x0d\x0a$("#imgBasicInfo").attr("src", "../../Images/BarOpen.gif")\x0d\x0a}\x0d\x0a})\x0d\x0a})\x0d\x0aimgBasicInfo为你要显示的展开、收起的图片动态

js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局。这时候Android可以监听resize事件,代码如下,而ios没有相关事件。var winHeight = $(window).height() //获取当前页面高度$(window).resize(function(){ var thisHeight=$(this).height() if(winHeight - thisHeight >50){ //当软键盘弹出,在这里面操作}else{//当软键盘收起,在此处操作}})/*** 解决ios键盘弹出遮挡input*/function iosInput() {if(isIos()){$('.chart-footer').css('position','absolute')//解决第三方软键盘唤起时底部input输入框被遮挡问题var bfscrolltop = document.body.scrollTop//获取软键盘唤起前浏览器滚动部分的高度$(".chart-input").focus(function(){//在这里‘input.inputframe’是我的底部输入栏的输入框,当它获取焦点时触发事件interval = setInterval(function(){//设置一个计时器,时间设置与软键盘弹出所需时间相近document.body.scrollTop = document.body.scrollHeight//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度},100)}).blur(function(){//设定输入框失去焦点时的事件clearInterval(interval)//清除计时器document.body.scrollTop = bfscrolltop//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度})}}iosInput()

<script src="jquery-1.8.2.js"></script>

<script>

/*展开和收起用一个div,也可以说它是个按钮,假设它的id=d1

假设需要显示和隐藏的div叫d2

下面这段代码只是粗略的实现了你的要求,主要是给你提供个思路

*/

$(function(){

$('#d1').click(function(){//给d1绑定一个点击事件

           

        /*这个判断的意义是,如果d2是隐藏的,那么让它显示出来,并将d1的文本内容替换成收起,

        如果是显示的,那么就隐藏它并将d1的文本内容替换为展开*/

        if($('#d2').is(':hidden'))

        {

          $('#d2').slideDown('slow')  

          $(this).text('收起')

        }else{

          $('#d2').slideUp('slow')

          $(this).text('展开')  

            }

               

    /*这是一个很简单的事件处理,如果还需要跟上图片的变换,就在判断的对应位置写入图片或者背景变换的代码,*/

})

})

</script>

<div id='d1'>展开</div>

<div id='d2' style=" display:none">内容</div>