页面列表闭合与展开效果出不来，求救_html/css_WEB-ITnose
回复讨论(解决方案)
发完整代码，不要发图片
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script> <br /> <br /> function list(node){ <br /> //获取被操作的节点ul。 <br /> /* <br /> * 先通过事件源超链接标签获取其父节点td，然后在通过父节点获取ul节点。 <br /> */ <br /> var oTdNode = node.parentNode; <br /> var oUlNodes = oTdNode.getElementsByTagName("ul")[0]; <br /> //alert(oUlNodes.nodeName); <br /> <br /> //获取表格中所有的ul。 <br /> //先获取表格节点对象。 <br /> var oTabNode = document.getElementById("goodlist"); <br /> var oCollUlNodes = oTabNode.getElementsByTagName("ul"); <br /> for(var x; x<oCollUlNodes.length; x++){ <br /> if(oCollUlNodes[x] == oUlNodes){ <br /> if(oULNodes.className = "open"){ <br /> oUlNodes.className = "close"; <br /> }else{ <br /> oUlNodes.className = "open"; <br /> } <br /> }else{ <br /> oCollUlNodes.className = "close"; <br /> } <br /> } <br /> } <br /> <br /> </script>
| 好友菜单
|
| 好友菜单
|
| 好友菜单
|
| 好友菜单
|
上面图片代码就是完整的，一直按顺序
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> /**对表格的Ul样式进行定义*去除无序样式*将列表外编剧取消**/table ul{margin:0px;list-style:none;padding:0px;background-color:#3C9DFF; } /*对表格进行样式定义*对表格框线进行定义。* 以及单元格的框线进行定义**/table { border:#86FFFF 2px thin;width:80px; }table td{border:#8080ff 1px solid;background-color:#f3c98f;padding:0px; }/**取消超链接样式**/table td a:link,table td a:visited{color:#FF0B0B;text-decoration:none; }/*预定义一些样式*/.open{display:block; }.close{display:none; } </style> <script type="text/javascript"> function list(node) { //获取被操作的节点ul。 /* * 先通过事件源超链接标签获取其父节点td，然后在通过父节点获取ul节点。 */ var oTdNode = node.parentNode; var oUlNodes = oTdNode.getElementsByTagName("ul")[0]; //alert(oUlNodes.nodeName); //获取表格中所有的ul。 //先获取表格节点对象。 var oTabNode = document.getElementById("goodlist"); var oCollUlNodes = oTabNode.getElementsByTagName("ul"); if (oUlNodes.className == "open") { oUlNodes.className = "close"; } else { for (var x = 0; x < oCollUlNodes.length; x++) oCollUlNodes[x].className = "close"; oUlNodes.className = "open"; }} </script></head><body><table id="goodlist"> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单</a> <ul class="open"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单</a> <ul class="close"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单</a> <ul class="close"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单</a> <ul class="close"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> </table> </body></html>
上面图片代码就是完整的，一直按顺序
主要是你发图片别人不好调试
代码我自己觉得没有问题，但就是出不了结果
谢谢，你的代码可以出结果，你看看我的代码哪里出差错了
谢谢，你的代码可以出结果，你看看我的代码哪里出差错了
你代码错误很多，逻辑性错误就不说了，只说语法错误
var oTabNode = document.getElementById("goodlist");
var oCollUlNodes = oTabNode.getElementsByTagName("ul");
for(var x; x
if(oULNodes.className = "open"){ //比较相等用 “==” 。 oULNodes的l是小写
oUlNodes.className = "close";
}else{
oUlNodes.className = "open";
}
}else{
oCollUlNodes.className = "close"; //应该oCollUlNodes[x].className
}
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $(".hylist").click(function(){ $(this).parent().addClass('active').siblings().removeClass('active'); });});</script><style type="text/css">dl,dd,dt{margin:0;padding:0;}.box{width:200px;background:#66cccc;line-height:24px;font-size:14px;text-align:center;}.box .hylist{background:#ff9966;color:#fff;}.box dd{display:none;}.box .active .hylist{border-left:8px solid #f00;}.box .active dd{display:block;}</style><div class="box"> <dl class="active"><dt class="hylist">好友菜单</dt><dd>一个好友11</dd><dd>一个好友12</dd><dd>一个好友13</dd></dl> <dl class=""><dt class="hylist">好友菜单</dt><dd>一个好友21</dd><dd>一个好友22</dd><dd>一个好友23</dd></dl> <dl class=""><dt class="hylist">好友菜单</dt><dd>一个好友31</dd><dd>一个好友32</dd><dd>一个好友33</dd></dl></div>十分感谢你，能给我一些指导吗，因为我自己在自学web前端,对于web整体意识还是模糊的
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
