jquery - 左边栏菜单隐藏/显示

最新推荐文章于 2020-03-20 21:18:40 发布

nospeak

最新推荐文章于 2020-03-20 21:18:40 发布

阅读量229

点赞数

分类专栏： jquery 文章标签： jQuery CSS HTML ViewUI

本文链接：https://blog.csdn.net/nospeak/article/details/83811262

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>jquery - 左边栏菜单隐藏/显示</title>
<script type="text/javascript" src="jquery-1.4.4.min.js" ></script>
<script>
  $(document).ready(function(){

    /** 通过点击展开左边栏 **/
    $("#pull").click(function(){
      if($("#mydiv").css("left") == "0px")
      {
        $("#mydiv").animate({left:"-150px"});
      }
      else
      {
        $("#mydiv").animate({left:"0px"});
      }
    });

    /** 通过鼠标进出来展开与收缩左边栏 **/
    /**
    $("#pull").mouseover(function(){
      $("#mydiv").animate({left:"0px"});
    });
    $("#pull").mouseout(function(){
      $("#mydiv").animate({left:"-150px"});
    });
    **/

    /** 首页连接 **/
    $("#aIndex").click(function(){
      $("#maindiv").load("http://xieruilin.iteye.com/");
    });
  });
</script>
<style>
  #mydiv
  {
    width:200px;
    height: 100%;
    position: absolute;
    top:0;
    left:-150px;
  }
  #maindiv
  {
    width:100%;
    height: 100%;
    background:black;
    position: absolute;
    top:0;
    left:0;
  }
</style>
</head>
<body>

<div id="maindiv">
</div>

<div id="mydiv">
  <div style="background:blue;width:150px;height:100%;float: left;color:#FFFFFF;">
    <a id="aIndex" href="#">首页</a>
  </div>
  <div style="width:50px;height:100%;float: left;">
    <div id="pull" style="background:blue;width:50px;height:40px;color:yellow;cursor:pointer;">
      拉
    </div>
  </div>
</div>

</body>
</html>

nospeak

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery - 左边栏菜单隐藏/显示

[code="html"]jquery - 左边栏菜单隐藏/显示 $(document).ready(function(){ /** 通过点击展开左边栏 **/ $("#pull").click(function(){ if($("#mydiv").css("left") == "0px") { $("#m.
复制链接

扫一扫