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的使用技巧在其中,希望自己能记住

阅读剩余部分

相关阅读 >>

css怎么连接到Html

详细介绍Html5中的新事件

Html表格怎么隐藏行

Html怎么实现隐藏占位

xml和Html分别是什么类型的文件

Html中<p>是什么

Html em标签怎么用

Html 如何添加链接

Html如何实现点击button页面跳转

Html中的锚点和页面跳转

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




打赏

取消

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

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

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

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

评论

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