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

阅读剩余部分

相关阅读 >>

HtmlHtml5的区别是什么

Html align属性是什么含义?Html中的align属性设置方法介绍

Html的特殊字符-css3 content:"特殊符号"应该如何使用

Html如何调用外部css

利用gulp实现压缩的实例

实现在Html页面加载完毕后运行js方法

Html怎么添加css样式?

Html表单怎么插图

Html怎么用link引入css

Html如何设置一个按钮

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




打赏

取消

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

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

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

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

评论

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