JS 点击了不能缩回去,求高人啊

baibgyve 2011-10-01 10:02:53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
function flexMenu(id)
{
var $id = document.getElementById(id);
var titleList = $id.getElementsByTagName('h2');
var contentList = $id.getElementsByTagName('div');
titleList[titleList.length-1].style.border = 'none';
for(var i=0;i<titleList.length;i++)
{
titleList[i].onclick = function()
{

for(var a=0;a<contentList.length;a++)
{
//contentList[a].style.display = 'none';
}
if(this.nextSibling.nodeType=='3')
{
this.nextSibling.nextSibling.style.display = '';
}else
{
this.nextSibling.style.display = '';
}
}
}
}
window.onload = function(){ flexMenu('ProSortBox')}
</script>
</head>
<body>
<div id="ProSortBox">


<h2 class="title"><a href="#">Sealing Material</a></h2>
<div class='content' style='display:none;'>
<ul id='prosort2'>
<li><a href="ProIndex_513-500-1.html" title="Asbestos Rubber Sheets">Asbestos Rubber Sheets</a></li>
<li><a href="ProIndex_513-501-1.html" title="Non-Asbestos Jointing Sheets">Non-Asbestos Jointing Sheets</a></li>
<li><a href="ProIndex_513-502-1.html" title="Asbestos Latex Paper/Sheet">Asbestos Latex Paper/Sheet</a></li>
<li><a href="http://www.wto2.com" title="外贸网站建设">外贸网站建设</a></li>
<li><a href="ProIndex_513-504-1.html" title="Graphite Sheets">Graphite Sheets</a></li>
</ul></div>
<h2 class="title"><a href="#">Cylinder Head Gasket</a></h2>
<div class='content' style='display:none;'>
<ul id='prosort2'>
<li><a href="ProIndex_513-506-1.html" title="TOYOTA gasket">TOYOTA gasket</a></li>
<li><a href="ProIndex_513-507-1.html" title="NISSAN 1">NISSAN 1</a></li>
<li><a href="ProIndex_513-508-1.html" title="MITSUBISHI 1">MITSUBISHI 1</a></li>
<li><a href="ProIndex_513-509-1.html" title="HONDA 1">HONDA 1</a></li>
<li><a href="ProIndex_513-510-1.html" title="MAZDA 1">MAZDA 1</a></li>
<li><a href="ProIndex_513-511-1.html" title="SUZUKI 1">SUZUKI 1</a></li>
</ul></div>
<h2 class="title"><a href="#">Full Gasket Set</a></h2>

<div class='content' style='display:none;'>

<ul id='prosort2'>
<li><a href="ProIndex_513-522-1.html" title="TOYOTA">TOYOTA</a></li>
<li><a href="ProIndex_513-523-1.html" title="NISSAN">NISSAN</a></li>
<li><a href="ProIndex_513-524-1.html" title="MITSUBISHI">MITSUBISHI</a></li>
<li><a href="ProIndex_513-525-1.html" title="ISUZU">ISUZU</a></li>
<li><a href="ProIndex_513-526-1.html" title="MAZDA">MAZDA</a></li>
<li><a href="ProIndex_513-527-1.html" title="VOLKSWAGEN">VOLKSWAGEN</a></li>
<li><a href="ProIndex_513-528-1.html" title="DAEWOO">DAEWOO</a></li>
</ul></div>
</div>
</body>
</html>
...全文
166 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
明悟 2011-10-05
  • 打赏
  • 举报
 回复
真被3楼说中了，不结贴吗？
BLUE_LG 2011-10-02
  • 打赏
  • 举报
 回复 


<script type="text/javascript"> 

function flexMenu(id)

{

 var $id = document.getElementById(id);

 var titleList = $id.getElementsByTagName('h2');

 var contentList = $id.getElementsByTagName('div');

 var uls=$id.getElementsByTagName('ul');

 titleList[titleList.length-1].style.border = 'none';

 for(var i=0;i<titleList.length;i++)

 {  

  titleList[i].i=i;

  titleList[i].onclick = function(){uls[this.i].parentNode.style.display=(uls[this.i].parentNode.style.display=="none"?"block":"none");}

  }

}

window.onload = function(){ flexMenu('ProSortBox')}

</script>

最好修改下html结构，方便js的使用。。。
再改改吧。。。
Rather_lonely 2011-10-02
  • 打赏
  • 举报
 回复
是不是要这样的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
function flexMenu(id,titleTag,subTitleTag)
{
var $id = document.getElementById(id);
var titleList = $id.getElementsByTagName(titleTag);
var contentList = $id.getElementsByTagName(subTitleTag);
titleList[titleList.length-1].style.border = 'none';

var nextElementNode;
for(var i=0;i<titleList.length;i++)
{
titleList[i].onclick = function()
{
nextElementNode= getNextElement(this);
if(nextElementNode.style.display == 'none'){
nextElementNode.style.display = 'block';
}else{
nextElementNode.style.display = 'none';
}
}
}
}

//获取该节点的下一个元素节点
function getNextElement(node){
if(node == null){
return null;
}
else if(node.nextSibling.nodeType == '1'){
return node.nextSibling;
}else{
getNextElement(node.nextSibling);
}
}
window.onload = function(){ flexMenu('ProSortBox','h2','div')}
</script>
</head>
<body>
<div id="ProSortBox">


<h2 class="title"><a href="#">Sealing Material</a></h2>
<div class='content' style='display:none;'>
<ul id='prosort2'>
<li><a href="ProIndex_513-500-1.html" title="Asbestos Rubber Sheets">Asbestos Rubber Sheets</a></li>
<li><a href="ProIndex_513-501-1.html" title="Non-Asbestos Jointing Sheets">Non-Asbestos Jointing Sheets</a></li>
<li><a href="ProIndex_513-502-1.html" title="Asbestos Latex Paper/Sheet">Asbestos Latex Paper/Sheet</a></li>
<li><a href="http://www.wto2.com" title="΢óθվݨʨ">΢óθվݨʨ</a></li>
<li><a href="ProIndex_513-504-1.html" title="Graphite Sheets">Graphite Sheets</a></li>
</ul></div>
<h2 class="title"><a href="#">Cylinder Head Gasket</a></h2>
<div class='content' style='display:none;'>
<ul id='prosort2'>
<li><a href="ProIndex_513-506-1.html" title="TOYOTA gasket">TOYOTA gasket</a></li>
<li><a href="ProIndex_513-507-1.html" title="NISSAN 1">NISSAN 1</a></li>
<li><a href="ProIndex_513-508-1.html" title="MITSUBISHI 1">MITSUBISHI 1</a></li>
<li><a href="ProIndex_513-509-1.html" title="HONDA 1">HONDA 1</a></li>
<li><a href="ProIndex_513-510-1.html" title="MAZDA 1">MAZDA 1</a></li>
<li><a href="ProIndex_513-511-1.html" title="SUZUKI 1">SUZUKI 1</a></li>
</ul></div>
<h2 class="title"><a href="#">Full Gasket Set</a></h2>

<div class='content' style='display:none;'>

<ul id='prosort2'>
<li><a href="ProIndex_513-522-1.html" title="TOYOTA">TOYOTA</a></li>
<li><a href="ProIndex_513-523-1.html" title="NISSAN">NISSAN</a></li>
<li><a href="ProIndex_513-524-1.html" title="MITSUBISHI">MITSUBISHI</a></li>
<li><a href="ProIndex_513-525-1.html" title="ISUZU">ISUZU</a></li>
<li><a href="ProIndex_513-526-1.html" title="MAZDA">MAZDA</a></li>
<li><a href="ProIndex_513-527-1.html" title="VOLKSWAGEN">VOLKSWAGEN</a></li>
<li><a href="ProIndex_513-528-1.html" title="DAEWOO">DAEWOO</a></li>
</ul></div>
</div>
</body>
</html>
Acesidonu 2011-10-02
  • 打赏
  • 举报
 回复
这个结帖率很低。
明悟 2011-10-02
  • 打赏
  • 举报
 回复
if($(this).attr("display")=="none")
忘记加引号了
明悟 2011-10-02
  • 打赏
  • 举报
 回复
楼上正解
JQuery函数更简单，不知楼主试过没有：
$(document).ready(function(){
$("h2").each().click(function(){
if($(this).attr(display)=="none"){
$("div").each().css({display:"none"});
$(this).css({display:"block"});
}
else{
$(this).css({display:"none"});
}
})
})
baibgyve 2011-10-01
  • 打赏
  • 举报
 回复
点下展开，再点下，把刚才展开的关闭掉。
明悟 2011-10-01
  • 打赏
  • 举报
 回复
你要怎么缩啊？
是再点一下缩回去还是点其他菜单缩回去？
鼠标点击出现下拉菜单，点其他地方，缩回去。
本文解析了JavaScript中如何处理元素的点击事件，包括跨浏览器兼容性的实现方式，通过具体代码示例说明了事件对象的获取及目标元素的确定过程。
轻量级JavaScript动画库force.js实战：实现页面平滑滚动与丰富元素动效
本文详细介绍了轻量级JavaScript动画库force.js的核心功能与使用方法，涵盖了其兼容jQuery和独立使用的两种模式。通过31种预设动画效果和CSS3 transition与transform技术实现平滑滚动与丰富元素动效。文章还深入讲解了滚动控制、动画触发机制及API调用方式，帮助开发者提升网页交互性和视觉表现力。
给iframe添加点击事件，控制菜单显示隐藏
本文介绍了一个实用的网页设计技巧，通过JavaScript实现当点击iframe内的任意位置时，页面顶部的菜单栏会自动收起的功能。此方法适用于拥有头部菜单和底部iframe布局的网站，提升了用户体验。
导航栏手机适配下，点击按钮出导航栏，点击×关闭导航栏
本文详细介绍了如何使用HTML、CSS和JavaScript创建一个响应式的网站导航菜单，包括菜单的展开和收起功能，以及如何通过JavaScript监听点击事件来实现菜单项的动态显示和隐藏。
简单的点击展开和回缩
本文介绍了一个使用jQuery实现的滑动展开与收起效果的示例。通过简单的HTML结构和jQuery代码，可以轻松地创建一个按钮，点击后会以滑动的方式展开或收起隐藏的内容。此效果广泛应用于网页设计中，特别是在需要节省空间或提供额外信息的情况下。
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章