创新路
我们一直在努力

script 显示隐藏手机站下拉导航

引用jq:

<script src="” _src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js">”>http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

css代码:

<style>

#nav{ 

    display:none; 

    z-index:99999; 

    position:fixed; 

    width:100%; 

    top:60px; 

    left:0;

    background:#999; 

    height:100%;

}

#nav a{

    display:block; 

    line-height:60px;

}

#top{

    height:60px;

}

</style>

html代码:

<div id="top"><a onclick="opennav();">导航</a></div>

<div id="nav">

<a href="/">栏目一</a>

<a href="/">栏目一</a>

<a href="/">栏目一</a>

<a href="/">栏目一</a>

<a href="/">栏目一</a>

<a href="/">栏目一</a>

<a href="/">栏目一</a>

<a href="/">栏目一</a>

</div>

js代码:

<script language="javascript">

function opennav(){

    var id=document.getElementById('nav'); //获取导航元素ID

    if(id.style.display=='block'){    //判断状态是否显示

        id.style.display='none';  //如果当前为显示,就“隐藏”

    }else{

        id.style.display='block'; //不然就执行“显示”

    }

}

</script>

效果:

image.png

未经允许不得转载:天府数据港官方信息博客 » script 显示隐藏手机站下拉导航

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机