Copy codeThe Code is as follows:
<! 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> tree </title>
<Link href = "css/style.css" rel = "stylesheet" type = "text/css"/>
<Style type = "text/css">
. Node ul {
Margin-left: 20px;
}
. Node. node {
Display: none;
}
. Node. tree {
Height: 24px;
Line-height: 24px;
}
. Ce_ceng_close {
Background: url (images/cd_zd1.png) left center no-repeat;
Padding-left: 15px;
}
. Ce_ceng_open {
Background: url (images/cd_zd.png) left center no-repeat;
}
</Style>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.10.2.min.js"> </script>
</Head>
<Body>
<Div class = "cd_zj_l">
<Div class = "cd_title"> directory navigation </div>
<Div class = "cv_fcv node">
<Div class = "tree"> philosophy and religion </div>
<Ul class = "node">
<Li>
<Div class = "tree"> Philosophical Ethics </div>
<Ul class = "node">
<Li>
<Div class = "tree"> Marxist Philosophy </div>
<Div class = "tree"> Marxist Philosophy </div>
<Div class = "tree"> Marxist Philosophy </div>
<Div class = "tree"> Marxist Philosophy </div>
</Li>
<Div style = "clear: both"> </div>
</Ul>
</Li>
<Div style = "clear: both"> </div>
</Ul>
<Div class = "tree"> philosophy and religion </div>
<Ul class = "node">
<Li>
<Div class = "tree"> Philosophical Ethics </div>
<Ul class = "node">
<Li>
<Div class = "tree"> Marxist Philosophy </div>
<Div class = "tree"> Marxist Philosophy </div>
<Div class = "tree"> Marxist Philosophy </div>
<Div class = "tree"> Marxist Philosophy </div>
</Li>
</Ul>
</Li>
</Ul>
</Div>
</Div>
<Script type = "text/javascript">
$ (". Tree"). each (function (index, element ){
If ($ (this). next (". node"). length> 0 ){
$ (This). addClass ("ce_ceng_close ");
}
});
$ (". Tree"). click (function (e ){
Var ul = $ (this). next (". node ");
If(ul.css ("display") = "none "){
Ul. slideDown ();
$ (This). addClass ("ce_ceng_open ");
Ul. find (". ce_ceng_close"). removeClass ("ce_ceng_open ");
} Else {
Ul. slideUp ();
$ (This). removeClass ("ce_ceng_open ");
Ul. find (". node"). slideUp ();
Ul. find (". ce_ceng_close"). removeClass ("ce_ceng_open ");
}
});
</Script>
</Body>
</Html>
The tree menu is implemented using js! Believe in yourself that you can achieve better!
Implemented