ホームページ  >  記事  >  ウェブフロントエンド  >  ページ リストの閉じたり展開したりする効果は表示できません。help_html/css_WEB-ITnose を参照してください。

ページ リストの閉じたり展開したりする効果は表示できません。help_html/css_WEB-ITnose を参照してください。

WBOY
WBOYオリジナル
2016-06-21 08:52:471484ブラウズ














ディスカッション (解決策) に返信

完全なコードを投稿してください。画像は投稿しないでください

83cd99c882da23477e41510c00baa550
93f0f5c25f18dab9d176bd4f6de5d30e
da9b90c5fa9aed6fb5d50a381b32e25d
b2386ffb911b14667cb8f0f91ea547a7無題ドキュメント6e916e0f7d1e588d4f442bf645aedb2f

080b747a20f9163200dd0a7d304ba388
/*
* テーブルの 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;
}
/*
*ハイパーリンク スタイルをキャンセルします🎜> *
*/

table td a:link,table td a:visited{
color:#FF0B0B;
text-decoration:none; /*いくつかのスタイルを事前定義します*/

.open{
display:block;
}
.close{
display:none;
< ;/ style>

4ec11beb6c39d0703d1751d203c17053

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");
for(var x; x5140f448f9498b562d0e25b6b146fca9
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

153944c591c21502fdbd2d9c5d00b3cc
a href="javascript:void; 0)" onclick="リスト(この) "&gt; friendsメニュー&lt;/a&gt;
🎜>; a friend&lt;/li&gt;
🎜>c1accf82d8622cfb4d89b29ef3051141友達メニュー5db79b134e9f6b82c0b36e0489ee08ed
t;友人
id(0) "onclick =" list(this) "&gt; friend menu&lt;/a&gt;
; li&gt; a friend&lt;/li&gt;
&lt;🎜>&lt;
>&lt; li>友人bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6友人bed06894275b65c1ab86501b08a632eb ;
73a6ac4ed44ffec12cee46588e518a5e


上の画像のコードは完全で、常に順序どおりです





上の画像のコードは完全で、常に順序通りです

主な理由は、写真を送ると他の人がデバッグするのは困難です

コードには問題ないと思いますが、結果が得られません

ありがとう、あなたのコードは結果を生み出すことができます。私のコードがどこで間違っていたのか見てください

谢谢,你的代码可以出结果,你看看我的代码哪里出差错了


你代码错误很多,逻辑性错误就不说了,只说语法错误

var oTabNode = document.getElementById("goodlist");
var oCollUlNodes = oTabNode.getElementsByTagName("ul");
for(var x; xif(oCollUlNodes[x] == oUlNodes){ //对象是按引用地址比较的。虽然两个jq对象中包含的元素一样,但引用地址不同也不相等
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整体意识还是模糊的

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。