简单的jquery实现收缩列表菜单

最新推荐文章于 2024-08-17 18:05:21 发布

MY128

最新推荐文章于 2024-08-17 18:05:21 发布

阅读量1.5k

点赞数

分类专栏： jquery 文章标签： jquery 菜单收缩

本文链接：https://blog.csdn.net/MY128/article/details/79772955

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 
  <!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 
  > 
 
 
  .level1 ul{ 
 
 
  display: 
  none; 
 

   } 
 
 
  .current{ 
 
 
  color: 
  red; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  ul 
  class= 
  "menu" 
  > 
 
 
  < 
  li 
  class= 
  "level1" 
  > 
 
 
  < 
  a 
  href= 
  "#none" 
  >衬衫 
  </ 
  a 
  > 
 
 
  < 
  ul 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >短袖衬衫 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >长袖衬衫 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >长袖T恤 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >短袖T恤 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  </ 
  li 
  > 
 
 
  < 
  li 
  class= 
  "level1" 
  > 
 
 
  < 
  a 
  href= 
  "#none" 
  >卫衣 
  </ 
  a 
  > 
 
 
  < 
  ul 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >开襟卫衣 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >套头卫衣 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >运动卫衣 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >童装卫衣 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  </ 
  li 
  > 
 
 
  < 
  li 
  class= 
  "level1" 
  > 
 
 
  < 
  a 
  href= 
  "#none" 
  >裤子 
  </ 
  a 
  > 
 
 
  < 
  ul 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >短裤 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >休闲裤 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >牛仔裤 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  < 
  li 
  > 
  < 
  a 
  href= 
  "#" 
  >卡其裤 
  </ 
  a 
  > 
  </ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  </ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 

 
  </ 
  div 
  > 
 
 
  < 
  script 
  src= 
  "public/jquery.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  < 
  script 
  > 
 
 
  $( 
  '.level1>a'). 
  click( 
  function () { 
 
 
  $( 
  this). 
  addClass( 
  'current') 
 

   . 
  next(). 
  show() 
 

   . 
  parent(). 
  siblings(). 
  children( 
  'a'). 
  removeClass( 
  'current') 
 

   . 
  next(). 
  hide(); 
 
 
  return 
  false; 
 

   }) 
 
 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 