javascrip 树型菜单_scripshon trees-CSDN博客

本文链接：https://blog.csdn.net/ranbo3013/article/details/2966321

本文介绍了一种使用HTML、CSS及JavaScript实现的简易折叠菜单方法。通过简单的代码即可创建可交互的折叠式导航列表，适用于快速原型设计或轻量级网站项目。

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

刚从网上学到这招，对比而言这种方法最简单，当然也有很多不足之处~！不过先记下，日后慢慢研究~！

先将如下代码下在head里面：

<style>
<!-- 
#foldheader{cursor:hand ; font-weight:bold ; 
list-style-image:url(fold.gif)} 
#foldinglist{list-style-image:url(list.gif)} 
//--> 
</style>
<script language="JavaScript1.2">
<!--
var head="display:''"
  
function change(){
  if(!document.all)
  return
  if (event.srcElement.id=="foldheader") {
  var srcIndex = event.srcElement.sourceIndex
  var nested = document.all[srcIndex+1]
  if (nested.style.display=="none") {
  nested.style.display=''
  event.srcElement.style.listStyleImage="url(open.gif)"
  }
  else {
  nested.style.display="none"
  event.srcElement.style.listStyleImage="url(fold.gif)"
  }
  }
  }
document.onclick=change
//--> 
</script>

再将如下代码放在body 里：根据不同的页面需求做一些简单修改就搞定了，TMD，太简单了，爽~！

<ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none">
<li><a href="#">CNN</a></li>
<li><a href="#">ABC News</a></li>
<li><a href="#">Vancouver Sun</a></li>
</ul>
 <li id="foldheader">Games</li>
<ul id="foldinglist" style="display:none">
<li><a href="#">GameSpot</a></li>
<li><a href="#">Happy Puppy</a></li>
<li><a href="#">Game Center</a></li>
</ul>
 <li id="foldheader">Software</li>
<ul id="foldinglist" style="display:none">
<li><a href="#">outer 1</a></li>
<li><a href="#">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none">
<li><a href="#">nested 1</a></li>
<li><a href="#">nested 2</a></li>
</ul>
<li><a href="#">outer 3</a></li>
<li><a href="#">outer 4</a></li>
</ul>
</ul>
<script language="JavaScript1.2">
<!--
  /**
  * Get cookie routine by Shelley Powers 
  * (shelley.powers@ne-dev.com)
  */
  function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
  offset = document.cookie.indexOf(search)
  // if cookie exists 
  if (offset != -1) { 
  offset += search.length
  // set index of beginning of value 
  end = document.cookie.indexOf(";", offset);
  // set index of end of cookie value 
  if (end == -1) end = document.cookie.length;
  returnvalue=unescape(document.cookie.substring(offset, end))
  }
  }
  return returnvalue;
  }
if (get_cookie(window.location.pathname) != ''){
  var openresults=get_cookie(window.location.pathname).split(" ")
  for (i=0 ; i < openresults.length ; i++){
  foldinglist[openresults[i]].style.display=''
  document.all[foldinglist[openresults[i]].sourceIndex -
  1].style.listStyleImage="url(open.gif)"
  }
  }
if (document.all){
  var nodelength=foldinglist.length-1
  var nodes=new Array(nodelength)
  var openones=''
  }
function check(){
  for (i=0 ; i <= nodelength ; i++){
  if (foldinglist[i].style.display=='')
  openones=openones + " " + i
  }
  document.cookie=window.location.pathname+"="+openones
  }
if (document.all)
  document.body.onunload=check
  //--> 
</script>