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

                                 

1.功能介绍:

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

 1.1.核心代码：

                            /*显示隐藏*/
                            $(this).closest(".lh1").find(".lh12").show();
                            $(this).closest(".lh1").siblings().find(".lh12").hide();
                            /*+ -  lh11*/
                            $(this).find("span").empty().text("-");
                            $(this).closest(".lh1").siblings().find(
                                    ".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()方法。