小白进阶模块2———导航栏的简单制作以及未来元素的使用

                                 

1.功能介绍:

 通过点击标题会展开或隐藏相应的界面,并且+ 与 - 会做出相应的转化 

 1.1.核心代码:

1                             /*显示隐藏*/
2                             $(this).closest(".lh1").find(".lh12").show();
3                             $(this).closest(".lh1").siblings().find(".lh12").hide();
4                             /*+ -  lh11*/
5                             $(this).find("span").empty().text("-");
6                             $(this).closest(".lh1").siblings().find(
7                                     ".lh11 span").empty().text("+");

2.功能介绍:

通过点击一个div里的元素,在另外一个div里添加一个元素(本例是以克隆元素),在通过相应操作来清除改元素以达到导航效果。

2.1核心代码:

                $('.nk').click(
                        function() {
                            $('.righthand').append(
                                    $(this).clone().toggleClass('rh').find(
                                            'spon').empty().text('*').closest(
                                            '.rh'));

                        })
                $('.rh').click(function() {
                    
                    $(this).closest('.rh').remove();
                })    
                $(document).on('click','.rh',function(){                
                    $(this).closest('.rh').remove();
                })

3.注意事项:

该例因为克隆之后的元素是未来元素,无法直接对其进行操作,需用.on()方法。

 

posted @ 2019-01-30 10:29 钟离上河 阅读(...) 评论(...) 编辑 收藏