JS之三级竖向展开/收缩导航菜单

骑猪看日落 2022-07-12 02:23 152阅读 0赞

准备如下：

在相对的images文件夹下放三个小图标： ![图片][20170207164410002] open.gif、 ![图片][20170207164419440] close.gif、 dot.gif  
效果如下：  
 ![图片][20170207164446454]![图片][20170207164455174]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>三级竖向展开/收缩导航菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    a {
    	color: #000000;
    	text-decoration: none;
    }
    a:hover {
    	color: #ff0000;
    	text-decoration: underline;
    }
    .ps {
    	margin-left: 10px;
    	display: none;
    }
    .open {
    	cursor: pointer;
    	background: url(images/open.gif) no-repeat;
    	line-height: 20px;
    	padding-left: 20px;
    	height: 20px;
    }
    .dot {
    	cursor: pointer;
    	background: url(images/dot.gif) no-repeat;
    	line-height: 20px;
    	padding-left: 20px;
    	height: 20px;
    }
    .content {
    	padding: 8px 0;
    }
    </style>
    </head>
    
    <body>
    <div class="content">
      <div class="open" id="sgc" onClick="two('gc')" style="background:url(images/close.gif) no-repeat"> <a target="FrameRight" href="#">国产</a></div>
      <div class="ps" id="gc" style="display:block">
        <div id="sf1" class="open" onClick="three('f1')"> <a target="FrameRight" href="#"> 比亚迪</a></div>
        <div class="ps" id="f1">
          <div class="dot"> <a target="FrameRight" href="#"> F3</a></div>
        </div>
      </div>
      <div class="open" id="sjk" onClick="two('jk')"> <a target="FrameRight" href="#">进口</a></div>
      <div class="ps" id="jk" style="display:none">
        <div id="sf2" class="open" onClick="three('f2')"> <a target="FrameRight" href="#"> 宝马</a></div>
        <div class="ps" id="f2">
          <div class="dot"> <a target="FrameRight" href="#"> 宝马1系</a></div>
        </div>
      </div>
    </div>
    <script language="javascript" type="text/javascript">
    function two(id)
    {
      var object=document.getElementById(id);
      if(object.style.display=="block" || object.style.display=="")
      {
         object.style.display="none";
         var ob2=document.getElementById('s'+id);
         ob2.style.backgroundImage="url(images/open.gif)";
      }
      else
      {
        object.style.display="block";
        var ob2=document.getElementById('s'+id);
        ob2.style.backgroundImage="url(images/close.gif)";
      }
    }
    function three(id)
    {
      var object=document.getElementById(id);  
      if(object.style.display=="block")
      {
         object.style.display="none";
         var ob2=document.getElementById('s'+id);
         ob2.style.backgroundImage="url(images/open.gif)";
      }
      else
      {
        object.style.display="block";
        var ob2=document.getElementById('s'+id);
        ob2.style.backgroundImage="url(images/close.gif)";
      }
    }
    </script>
    </body>
    </html>

[20170207164410002]: https://img-blog.csdn.net/20170207164410002
[20170207164419440]: /images/20220711/5d2894370c834915a8d4ef64d1cdbf36.png
[20170207164446454]: https://img-blog.csdn.net/20170207164446454
[20170207164455174]: /images/20220711/75dec451a3c549c39e45525b3654ec57.png