求助如何用JS实现折叠菜单功能

JavaScript016

求助如何用JS实现折叠菜单功能,第1张

最简单的方法就是把二级菜单的样式设置为：

.oe_secondary_submenu {display:none}

然后在点击的时候显示二级菜单：

$(".oe_secondary_submenu").data("onShow")=false    //一开始状态为隐藏

$(".oe_secondary_menu_section").click(function(){

    if($(".oe_secondary_submenu").data("onShow")){  //切换二级菜单的同时改变状态

       $(".oe_secondary_submenu").hide()

       $(".oe_secondary_submenu").data("onShow",false)

    }else{

       $(".oe_secondary_submenu").show()

       $(".oe_secondary_submenu").data("onShow",true)

    }

})

复杂一点的话可以用各种插件

知道你要啥样的，就说个最简单的竖列折叠菜单吧,比如：

菜单1

子菜单1

子菜单2

……

菜单2

子菜单1

子菜单2

……

如果要做这样的折叠菜单 那html为：

<div class="menu">

    <div>菜单1</div>

    <ul>

        <li>子菜单1</li>

        <li>子菜单2</li>

        ……

    </ul>

</div>

<div class="menu">

    <div>菜单1</div>

    <ul>

        <li>子菜单1</li>

        <li>子菜单2</li>

        ……

    </ul>

</div>

css为：(没样式只有功能，样式自己去加)

.menu ul{ display:none}

js为：

$('.menu').click(function(){

    $(this).find('ul').slideToggle()

)}

<!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>