JavaScript展开收缩特效

[fighter222]

面这个可以实现展开收缩的效果，可是有个问题，当我增加很多菜单后，点击后面的菜单展开会跳到页面顶部，有没有让他停在点击的这个菜单位置的方法啊

JS代码

function TreeMenu(node,id)
{
 var sibling = document.getElementById(id);

 if (sibling.style.display == 'none')
 {
  if (node.childNodes.length > 0)
  {
   if (node.childNodes[0].tagName == "IMG")
   {
    node.childNodes[0].src = "minus.gif"; //替换为展开时的图片
   }
  }

  sibling.style.display = '';
 }
 else
 {
  if (node.childNodes.length > 0)
  {
   if (node.childNodes[0].tagName == "IMG")
   {
    node.childNodes[0].src = "plus.gif";  //替换为收起时的图片
   }
  }
  sibling.style.display = 'none';
 }
}

页面代码：

<script type="text/javascript" src="TreeMenu.js"></script>

   <div id="menu1" onclick="TreeMenu(this,'child1')">
    <img src="plus.gif" ><a href="#">菜单1</a>
   </div> 
    <div id="child1" style="display:none">
        <a href="#">页面1</a><br>
        <a href="#">页面2</a>
    </div>
   <div id="menu2" onclick="TreeMenu(this,'child2')">
    <img src="plus.gif"><a href="#">菜单2</a>
   </div>
    <div id="child2" style="display:none">
         <a href="#">页面1</a><br>
         <a href="#">页面2</a>
   </div>

[blue_love]

呵呵，我还没做过这样功能的页面

[Jey]

hehe

[entertcl174]

可以实现!首先,用JS记录你当前的距离页面的高度(自己去查查这个属性),然后掉完方法以后,再把高度附上去!

[Gis个人开发]

说具体点..这个我做个..

[Msxindl_Com]

其实这个问题很简单的.


将所有的菜单中的href的做如下修改即可:

<a href="javascript:">菜单1</a>

[t88f07f21]

hahahahaha

[cxbase]

我用过这种方法，可以试一试

<script>
function showmenu(id){
var mObj = document.getElementById("menu" + id);
if(mObj.style.display == "none"){
mObj.style.display = "block";}

else{mObj.style.display = "none";}
}
</script>

<table border="0" align="left" width="200">
<tr><td align=left>
<table border="0 "align="left" width="200">
<tr><td align="left" onclick="showmenu(1)" style="cursor:hand">Menu_1</td></tr>
<tr><td align="left" id="Menu1" style="display:none">
<table border="0" align="right" width="180">
<tr><td align="center"><a href="#">Page_1</a></tr></td>
<tr><td align="center"><a href="#">Page_2</a></tr></td>
<tr><td align="center"><a href="#">Page_3</a></tr></td>
</table>
</td></tr>
</table>
</td></tr>

<tr><td align=left>
<table border="0 "align="left" width="200">
<tr><td align="left" onclick="showmenu(2)" style="cursor:hand">Menu_1</td></tr>
<tr><td align="left" id="Menu2" style="display:none">
<table border="0" align="right" width="180">
<tr><td align="center"><a href="#">Page_1</a></tr></td>
<tr><td align="center"><a href="#">Page_2</a></tr></td>
<tr><td align="center"><a href="#">Page_3</a></tr></td>
</table>
</td></tr>
</table>
</td></tr>
</table>