html 和css 和js结合实现折叠菜单的代码


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于html 和css 和js结合实现折叠菜单的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1. 套用模板,将菜单的相关信息直接放在脚本数据中,使用循环生成

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<script id="templateNavBar" type="text/html">

    <p class="nav-bar-logo">

 

    </p>

    {{each $data as item i}}

        <p class="nav-item {{item.class}}">{{item.name}}</p>

        {{if item.child != null}}

            <p class="childgroup">

                {{each item.child as child i}}

                    <p class="nav-item {{child.class}} child">{{child.name}}</p>

                {{/each}}

            </p>

        {{/if}}

    {{/each}}

</script>

2.在js中通过添加类open的方式来实现菜单的折叠和展开

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

$(document).on('click','.nav-item:not(.child)',function () {

console.log("choosing");

var that = $(this);

var next =that.next();

if(next.hasClass('childgroup')){

    if (that.hasClass('open'))

    {

        // 收起当前菜单项

        that.removeClass('open');

        next.slideUp();

    }

    else{

        // 将其他打开的菜单项收起来

        if($('.nav-item:not(.child).open').next().hasClass('childgroup'))

        {

            $('.nav-item:not(.child).open').next().slideUp();

            $('.nav-item:not(.child).open').removeClass('open');

        }

        // 激活当前菜单项

        that.addClass('open');

        next.slideDown();

    }

}

// 监听一级菜单结束

这里面也有一些css的使用技巧在其中,希望自己能记住

阅读剩余部分

相关阅读 >>

利用Html实现一个个人信息表的网页(代码实例)

Html怎样实现图文混排

Html怎么引用css文件

Html中sup标签上标字符和sub标签下标字符的使用方法介绍

Html5 aside标签有什么用?Html5 aside标签的使用总结(附实例)

Html optgroup标签是什么意思?关于Html optgroup标签的用法和属性实例解析

js实现改变Html上文字颜色和内容的方法

Html如何给文本文字添加删除线?两种方法添加删除线(实例)

Html与css中背景相关属性

Html div标签什么意思

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...