jquery 表格(展开和折叠列表项)代码,Js代码库,德仔网

代码语言
代码分类
【Js】 jquery 表格(展开和折叠列表项)
作者:泰鑫 / 发布于2016/4/26/ 611
HTML：
  <ul>
            <li class="address">中国
                <ul>
                    <li>北京</li>
                    <li>杭州</li>
                    <li class="address">温州
                        <ul>
                            <li>鹿城区</li>
                            <li>瓯海区</li>
                            <li>龙湾区</li>

                        </ul>
                    </li>
                </ul>
            </li>
            <li class="address">美国
                <ul>
                    <li>华盛顿</li>
                    <li>纽约</li>
                    <li>休斯顿</li>
                </ul>
            </li>
            <li class="address">英国
                <ul>
                    <li>伦敦</li>
                    <li>伯明翰</li>
                </ul>
            </li>

        </ul>



CSS：

ul{
                /*在FF和IE8情况下，默认padding-left40px；只用padding-left为10px，可达到预期效果*/
                padding-left: 10px;
                /*用360浏览器测试了下（估计IE7也是这个情况，IE6应该没人用了吧，Mic都抛弃了），没有预期效果，需要加上margin-left: 10px;，达到预期效果*/
                /*list-style: none;*/
                margin-left: 10px;
            }


            .jia{
                list-style-image:url(jia.jpg);
            }
            .jian{
                list-style-image: url(jian.jpg);
            }
            .none{
                /*没有图片样式，即为默认样式*/
                list-style-image:none;
            }



Jquery：

$('li.address').addClass('jia');
//              在FF和IE8情况下， $('li.address').children('ul').addClass('none')，可达到预期效果。除了li.address，其他的均是默认样式。如果把class(none)的属性改为list-style:none，则FF和IE8同样达到预期效果，但是360没有，出现每个列表项前都有一个加号
                $('li.address').children('ul').addClass('none');
//               在360下达不到，需要加入$('li.address').children().css('list-style', 'none')，如果把class(none)的属性改为list-style:none，如果加下面的语句，360同样没有效果，也是所有的列表项前有个加号。需先把class(none)的属性改为list-style-image:none，再list-style:none。似乎必须要回归原始的样式，才能清除样式。如果开始就改变成其他的样式图片，然后再list-style:none。则360下没有预期效果，依然是所有的列表项前出现加号。
                $('li.address').children().css('list-style', 'none');
                $('li.address').children().hide();
                $('li.address').each(function(index){   
                    $(this).click(function(event){
//                  alert索引看看，会发现点击'温州'的时候，会先弹出1然后再弹出0，在后再展开内容。这里有个事件冒泡。故下面加了event.stopPropagation();
//                    alert(index);
//                    event保存着事件对象
//                   event.target保存着发生时间的目标元素.可以确定首先接收到事件的元素（即实际被点击的元素）.this引用的是处理事件的元素.
//                    故如果 处理事件的元素等于初始就定义的事件对象的实际接收者
                        if(this==event.target){
                            if($(this).is('.jia')){
                                $(this).children().show();
                                $(this).removeClass('jia');
                                $(this).addClass('jian');
                            }else{
                                $(this).children().hide();
                                $(this).removeClass('jian');
                                $(this).addClass('jia');
                            } 
//                           event.stopPropagation()终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

                            event.stopPropagation();
                        }
                    });
                });
试试其它关键字
　表格　　展开和折叠　
同语言下
可能有用的
泰鑫贡献的其它代码(14)