js实现左右拖动，改变导航栏的宽度

最新推荐文章于 2024-07-26 15:00:16 发布

哈哈哦0

最新推荐文章于 2024-07-26 15:00:16 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 js html

本文链接：https://blog.youkuaiyun.com/qq_29207823/article/details/96987901

前端同时被 3 个专栏收录

58 篇文章

订阅专栏

29 篇文章

订阅专栏

html

5 篇文章

订阅专栏

本文介绍了一种简单的实现方法，通过拖动条来调整网页导航栏的宽度，适用于左侧导航栏树形菜单等级较多或标题较长的情况。文中提供了一个具体的HTML和JavaScript实例，演示如何使用鼠标操作调整导航栏的显示区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近接了一个需求，由于左侧导航栏树形菜单等级比较多或标题比较长，导致显示不完全，需要把导航栏改为可拖动改变显示区域大小。在网上找了一个比较简单易理解的做法，记下来供大家参考。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
ul,li{margin:0;padding:0;}
body{font:14px/1.5 Arial;color:#666;}
#box{position:relative;width:600px;height:400px;border:2px solid #000;margin:10px auto;overflow:hidden;}
#box ul{list-style-position:inside;margin:10px;}
#top,#bottom{color:#FFF;width:300px;height:400px;overflow:hidden;}
#top{background:green; float:left}
#bottom{background:skyblue;float:right}
#line{position:absolute;top:0;left:50%;height:100%;width:4px;overflow:hidden;background:red;cursor:w-resize;}
</style>
</head>
<body>
<center>左右拖动红条可改变显示区域宽度<span id="msg"></span></center>
<div id="box">
 <div id="top">
 左
 </div>
 <div id="bottom">
 右
 </div>
 <div id="line"></div>
</div>

<script>
function $(id) {
 return document.getElementById(id); 
}
window.onload = function() {
 var oBox = $("box"), oTop = $("top"), oBottom = $("bottom"), oLine = $("line");

 oLine.onmousedown = function(e) {
  console.log(e);
   var disX = (e || event).clientX;
   oLine.left = oLine.offsetLeft;

   document.onmousemove = function(e) { 
      var iT = oLine.left + ((e || event).clientX - disX);
      var e=e||window.event,tarnameb=e.target||e.srcElement;
      var maxT = oBox.clientWidth - oLine.clientWidth;
      oLine.style.margin = 0;
      iT < 0 && (iT = 0);
      iT > maxT && (iT = maxT);
      oLine.style.left = oTop.style.width = iT + "px";
      oBottom.style.width = oBox.clientWidth - iT + "px";
     $("msg").innerText='top.width:'+oLine.style.width+'---bottom.width:'+oBottom.style.width+'---oLine.offsetLeft:'+oLine.offsetLeft+'---disX:'+disX+'---tarnameb:'+tarnameb.tagName;
      return false
   }; 

   document.onmouseup = function() {
    document.onmousemove = null;
    document.onmouseup = null; 
    oLine.releaseCapture && oLine.releaseCapture()
   };
   oLine.setCapture && oLine.setCapture();
  return false
 };
};
</script>
</body>
</html>

若想变为自适应的，可以把宽高设置为百分比。