css+js 实现可折叠三级分类列表

html-css013

css+js 实现可折叠三级分类列表,第1张

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

    <title>CSS+JavaScript三级折叠菜单</title>

    <style>

        *,body,ul,li,h1,h2 {

    margin: 0

    padding: 0

    list-style: none

}

body {

    font: 12px "宋体"

    padding-top: 20px

}

#menu {

    width: 200px

    margin: auto

}

#menu h1 {

    cursor: pointer

    color: #FFF

    font-size: 12px

    padding: 5px 0 3px 10px

    border: #C60 1px solid

    margin-top: 1px

    background-color: #F93

}

#menu h2 {

    cursor: pointer

    color: #777

    font-size: 12px

    padding: 5px 0 3px 10px

    border: #E7E7E7 1px solid

    border-top-color: #FFF

    background-color: #F4F4F4

}

#menu ul {

    padding-left: 15px

    height: 100px

    border: #E7E7E7 1px solid

    border-top: none

    overflow: auto

}

#menu ul li {

    padding: 5px 0 3px 10px

}

.no {

    display: none

}

    </style>

    <script language="JavaScript">

        function ShowMenu(obj, noid) {

            var block = document.getElementById(noid)

            var n = noid.substr(noid.length - 1)

            if (noid.length == 4) {

                var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul")

                var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2")

                for (var i = 0 i < h2.length i++) {

                    h2[i].innerHTML = h2[i].innerHTML.replace("+", "-")

                    h2[i].style.color = ""

                }

                obj.style.color = "#FF0000"

                for (var i = 0 i < ul.length i++) {

                    if (i != n) {

                        ul[i].className = "no"

                    }

                }

            } else {

                var span = document.getElementById("menu").getElementsByTagName("span")

                var h1 = document.getElementById("menu").getElementsByTagName("h1")

                for (var i = 0 i < h1.length i++) {

                    h1[i].innerHTML = h1[i].innerHTML.replace("+", "-")

                    h1[i].style.color = ""

                }

                obj.style.color = "#0000FF"

                for (var i = 0 i < span.length i++) {

                    if (i != n) {

                        span[i].className = "no"

                    }

                }

            }

            if (block.className == "no") {

                block.className = ""

                obj.innerHTML = obj.innerHTML.replace("-", "+")

            } else {

                block.className = "no"

                obj.style.color = ""

            }

        }

    </script>

</head>

<body>

    <div id="menu">

        <h1 onClick="javascript:ShowMenu(this,'NO0')"> - 一级菜单A</h1>

        <span id="NO0" class="no">

   <h2 onClick="javascript:ShowMenu(this,'NO00')"> - 一级菜单A_1</h2>

   <ul id="NO00" class="no">

    <li>一级菜单A_0</li>

    <li>一级菜单A_1</li>

    <li>一级菜单A_2</li>

    <li>一级菜单A_3</li>

    <li>一级菜单A_4</li>

    <li>一级菜单A_5</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO01')"> - 一级菜单A_2</h2>

   <ul id="NO01" class="no">

    <li>一级菜单A_0</li>

    <li>一级菜单A_1</li>

    <li>一级菜单A_2</li>

    <li>一级菜单A_3</li>

    <li>一级菜单A_4</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO02')"> - 一级菜单A_3</h2>

   <ul id="NO02" class="no">

    <li>一级菜单A_0</li>

    <li>一级菜单A_1</li>

    <li>一级菜单A_2</li>

    <li>一级菜单A_3</li>

    <li>一级菜单A_4</li>

    <li>一级菜单A_5</li>

    <li>一级菜单A_6</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO03')"> - 一级菜单A_4</h2>

   <ul id="NO03" class="no">

    <li>一级菜单A_0</li>

    <li>一级菜单A_1</li>

    <li>一级菜单A_2</li>

    <li>一级菜单A_3</li>

    <li>一级菜单A_4</li>

    <li>一级菜单A_5</li>

    <li>一级菜单A_6</li>

    <li>一级菜单A_7</li>

   </ul>

</span>

        <h1 onClick="javascript:ShowMenu(this,'NO1')"> - 二级菜单B</h1>

        <span id="NO1" class="no">

   <h2 onClick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2>

   <ul id="NO10" class="no">

    <li>二级菜单B_0</li>

    <li>二级菜单B_1</li>

    <li>二级菜单B_2</li>

    <li>二级菜单B_3</li>

    <li>二级菜单B_4</li>

    <li>二级菜单B_5</li>

    <li>二级菜单B_6</li>

    <li>二级菜单B_7</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2>

   <ul id="NO11" class="no">

    <li>二级菜单B_0</li>

    <li>二级菜单B_1</li>

    <li>二级菜单B_2</li>

    <li>二级菜单B_3</li>

    <li>二级菜单B_4</li>

    <li>二级菜单B_5</li>

    <li>二级菜单B_6</li>

    <li>二级菜单B_7</li>

   </ul>

</span>

        <h1 onClick="javascript:ShowMenu(this,'NO2')"> - 三级菜单C</h1>

        <span id="NO2" class="no">

   <h2 onClick="javascript:ShowMenu(this,'NO20')"> - 三级菜单C_1</h2>

   <ul id="NO20" class="no">

    <li>三级菜单C_0</li>

    <li>三级菜单C_1</li>

    <li>三级菜单C_2</li>

    <li>三级菜单C_3</li>

    <li>三级菜单C_4</li>

    <li>三级菜单C_5</li>

    <li>三级菜单C_6</li>

    <li>三级菜单C_7</li>

    <li>三级菜单C_8</li>

    <li>三级菜单C_9</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO21')"> - 三级菜单C_2</h2>

   <ul id="NO21" class="no">

    <li>三级菜单C_0</li>

    <li>三级菜单C_1</li>

    <li>三级菜单C_2</li>

    <li>三级菜单C_3</li>

    <li>三级菜单C_4</li>

   </ul>

</span>

        <h1 onClick="javascript:ShowMenu(this,'NO3')"> - 四级菜单D</h1>

        <span id="NO3" class="no">

   <h2 onClick="javascript:ShowMenu(this,'NO30')"> - 四级菜单D_1</h2>

   <ul id="NO30" class="no">

    <li>四级菜单D_0</li>

    <li>四级菜单D_1</li>

    <li>四级菜单D_2</li>

    <li>四级菜单D_3</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO31')"> - 四级菜单D_2</h2>

   <ul id="NO31" class="no">

    <li>四级菜单D_0</li>

    <li>四级菜单D_1</li>

    <li>四级菜单D_2</li>

    <li>四级菜单D_3</li>

    <li>四级菜单D_4</li>

    <li>四级菜单D_5</li>

   </ul>

</span>

    </div>

</body>

</html>

bootstrap的多级列表可以使用基于bootstrap的 metronic。制作后效果如下:

源码如下:

<div class="tree well">

<ul>

<li>

 <span><i class="glyphicon glyphicon-folder-open"></i>Parent</span><a href="">Goes somewhere</a>

 <ul>

  <li>

    <span><i class="glyphicon glyphicon-minus-sign"></i>Child</span><a href="">Goes somewhere</a>

   <ul>

    <li>

      <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span><a href="">Goes somewhere</a>

    </li>

   </ul>

  </li>

  <li>

    <span><i class="glyphicon glyphicon-minus-sign"></i>Child</span><a href="">Goes somewhere</a>

   <ul>

    <li>

      <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span><a href="">Goes somewhere</a>

    </li>

    <li>

      <span><i class="glyphicon glyphicon-minus-sign"></i>Grand Child</span><a href="">Goes somewhere</a>

     <ul>

      <li>

        <span><i class="glyphicon glyphicon-minus-sign"></i>Great Grand Child</span><a href="">Goes somewhere</a>

         <ul>

          <li>

            <span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span><a href="">Goes somewhere</a>

          </li>

          <li>

            <span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span><a href="">Goes somewhere</a>

          </li>

          </ul>

      </li>

      <li>

        <span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span><a href="">Goes somewhere</a>

      </li>

      <li>

        <span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span><a href="">Goes somewhere</a>

      </li>

     </ul>

    </li>

    <li>

      <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span><a href="">Goes somewhere</a>

    </li>

   </ul>

  </li>

 </ul>

</li>

<li>

 <span><i class="glyphicon glyphicon-folder-open"></i>Parent2</span><a href="">Goes somewhere</a>

 <ul>

  <li>

    <span><i class="glyphicon glyphicon-leaf"></i>Child</span><a href="">Goes somewhere</a>

    </li>

   </ul>

</li>

</ul>

</div>

====================================================

JavaScript代码:

$(function () {

$('.tree li:has(ul)').addClass('parent_li').find(' >span').attr('title', 'Collapse this branch')

$('.tree li.parent_li >span').on('click', function (e) {

  var children = $(this).parent('li.parent_li').find(' >ul >li')

  if (children.is(":visible")) {

    children.hide('fast')

    $(this).attr('title', 'Expand this branch').find(' >i').addClass('icon-plus-sign').removeClass('icon-minus-sign')

  } else {

    children.show('fast')

    $(this).attr('title', 'Collapse this branch').find(' >i').addClass('icon-minus-sign').removeClass('icon-plus-sign')

  }

  e.stopPropagation()

})

})

=================================================

CSS样式表:

.tree {

min-height:20px

padding:19px

margin-bottom:20px

background-color:#fbfbfb

border:1px solid #999

-webkit-border-radius:4px

-moz-border-radius:4px

border-radius:4px

-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)

-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)

box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)

}

.tree li {

list-style-type:none

margin:0

padding:10px 5px 0 5px

position:relative

}

.tree li::before, .tree li::after {

content:''

left:-20px

position:absolute

right:auto

}

.tree li::before {

border-left:1px solid #999

bottom:50px

height:100%

top:0

width:1px

}

.tree li::after {

border-top:1px solid #999

height:20px

top:25px

width:25px

}

.tree li span {

-moz-border-radius:5px

-webkit-border-radius:5px

border:1px solid #999

border-radius:5px

display:inline-block

padding:3px 8px

text-decoration:none

}

.tree li.parent_li>span {

cursor:pointer

}

.tree>ul>li::before, .tree>ul>li::after {

border:0

}

.tree li:last-child::before {

height:30px

}

.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {

background:#eee

border:1px solid #94a0b4

color:#000

}