用JavaScript写出菜单栏收缩功能

最新推荐文章于 2024-06-30 14:04:39 发布

总是看不见

最新推荐文章于 2024-06-30 14:04:39 发布

阅读量2k

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/tamofig/article/details/80289655

版权

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0"> 
 
   < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge"> 
 
   < 
  title>Document</ 
  title> 
 
   < 
  style> 
 
  ul{ 
 
  list-style: 
  none; 
 
   } 
 
  li{ 
 
  width: 
  200 
  px; 
 
  height: 
  35 
  px; 
 
  float: 
  left; 
 
  background: 
  yellow; 
 
  overflow: 
  hidden; 
 
  line-height: 
  35 
  px; 
 
  text-align: 
  center; 
 
   } 
 
   </ 
  style> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div> 
 
   < 
  ul> 
 
   < 
  li>动漫 
 
   < 
  div> 
 
   < 
  p>海贼王</ 
  p> 
 
   < 
  p>火隐忍者</ 
  p> 
 
   </ 
  div> 
 
   </ 
  li> 
 
   < 
  li> 
 
   明星 
 
   < 
  div> 
 
   < 
  p>刘昊然</ 
  p> 
 
   < 
  p>陈立农</ 
  p> 
 
   </ 
  div> 
 
   </ 
  li> 
 
   </ 
  ul> 
 
   </ 
  div> 
 
   < 
  script> 
 
   window. 
  onload 
  = 
  function(){ //在浏览器设置窗口 
 
  var li 
  =document. 
  getElementsByTagName( 
  "li");//返回带有指定标签名的对象集合 
 
  for( 
  var i 
  = 
  0;i 
  <li.length;i 
  ++){ 
 
   li[i]. 
  onmouseover 
  = 
  function(){ 
 
  console. 
  log( 
  this);//这里的this指的是Windows 
 
  this.style.overflow 
  = 
  "visible"; 
 
   } 
 
//鼠标移动上去，内容不会被修剪，会呈现在元素框之外

   li[i]. 
  onmouseout 
  = 
  function(){ 
 
  this.style.overflow 
  = 
  "hidden"; 
 
  //鼠标移除去，内容会被修剪，并且其他内容是不可见的 
  
   } 
 
   } 
 
   } 
 
   </ 
  script> 
 
   </ 
  body> 
 
   </ 
  html>