ホームページ > 記事 > ウェブフロントエンド > ページ リストの閉じたり展開したりする効果は表示できません。help_html/css_WEB-ITnose を参照してください。
完全なコードを投稿してください。画像は投稿しないでください
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
上の画像のコードは完全で、常に順序どおりです
上の画像のコードは完全で、常に順序通りです
主な理由は、写真を送ると他の人がデバッグするのは困難です
コードには問題ないと思いますが、結果が得られません
ありがとう、あなたのコードは結果を生み出すことができます。私のコードがどこで間違っていたのか見てください
谢谢,你的代码可以出结果,你看看我的代码哪里出差错了
<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整体意识还是模糊的