新手请教一下这个点击展开和收起列表的写法是怎么实现的？

Question

没找到你要的效果啊  大概设置display 或者通过setInterval修改元素的高吧？

Answer 1

我也是看了半天，找不到是啥办法，链接上带有个javascript，其他看不懂了。

Answer 2

找一下源码就知道了~如下：
(1)html+css:css中先定义好，ul默认为overflow:hidden，类名为btn_links_open的ul为：overflow:visible.
(2)js:js控制类名来实现ul样式的改变。取到视频，彩票...这些li中的a元素，给每个a元素绑定mousedown事件：
鼠标在a上按下的时候，判断a的类名中是否有open===>
->没有就加上open，同时给这个a对应的ul的类名加上加上‘btn_links_open’；
->有就去掉‘open’同时还要给对应的ul的类名中去掉‘btn_links_open’；

Answer 3

请教，如果我要完整复制这个功能，把他的ul、li等结构弄下来，附上你给的css部分，和js部分，就能实现了吗？我怎么试了下好像无效……

Answer 4

不就是设置目标容器的style.display=none/block就好了，再次点击判断下状态，然后切换到另外的状态去
<a href="javascript:showhide('xiaoshuo')">小说</a>
<div id="xiaoshuo" style="display:none">小说内容......</div>
<br /><a href="javascript:showhide('shipin')">视频</a>
<div id="shipin" style="display:none">视频内容......</div>
<script type="text/javascript">
    function showhide(id) {
        var o = document.getElementById(id);
        o.style.display = o.style.display == 'block' ? 'none' : 'block';
    }
</script>

Answer 5

原理就是那样的，只是一个通过css类来控制，一个直接操作控件的style属性而已

Answer 6

哦，我一直在研究他那个。好像那个没有指定每个ul的ID吧，是自动获取的吗？你这个给每个div还赋予了一个ID来区分是点击哪个吧？

Answer 7

毒霸那个通过dom关系获取的，在http://m.duba.com/static/js/v1/min.touch.js?v=201311141625
这个js文件里面
a=document.getElementsByClassName("aft");
for(b=0;b<a.length;b++)
a[b].addEventListener("mousedown",function(){
var a=this.className
,b=knext(this.parentNode.parentNode)
,c=b.className;
-1==a.indexOf("open")?(this.className=a+" open",b.className=c+" btn_links_open"):(this.className=a.replace(" open",""),b.className=c.replace(" btn_links_open",""))})
}

Answer 8

嗯，我就是把这些字符：
a=document.getElementsByClassName("aft");
for(b=0;b<a.length;b++)
a[b].addEventListener("mousedown",function(){
var a=this.className,b=knext(this.parentNode.parentNode),c=b.className;
-1==a.indexOf("open")?(this.className=a+" open",b.className=c+" btn_links_open"):(this.className=a.replace(" open",""),b.className=c.replace(" btn_links_open",""))
})
存成js文件，然后调用，貌似没效果，是不是还写漏了什么呢？请教。

Answer 9

对了，这个链接是不是写错了？
<li><a href="javascript:;" class="aft">视频</a></li>

Answer 10

请教，如果我要完整复制这个功能，把他的ul、li等结构弄下来，附上你给的css部分，和js部分，就能实现了吗？我怎么试了下好像无效……肯定不行啊，给你的截图里的js部分调用了一个knext方法，但是只有调用没有该方法的定义。
你只要把这个方法实现了（以a元素为参数找到其对应的那个ul）或者在源代码找到这个方法的定义并放到这段js里，应该就可以了。

Answer 11

说错了。knext方法不是以a元素为参，是以a节点的父节点的父节点（即a所在的ul）为参数~~

Answer 12

能帮分析下吗？新手看不懂javascript，我就要提取他那个功能了，他的js文件我下载回来了，看了一头雾水，不知道该精简哪些。

Answer 13

CSS部分：
<style type="text/css">
.btn_links {
padding: 0 0 0 20%;
background: #F6F9FE;
box-shadow: inset 0 1px 2px #E8EAEF;
height: 0;
overflow: hidden;
}
.btn_links_open {
overflow: visible;
padding: 5px 0 5px 20%;
height: auto;
}
</style>HTML部分：<ul class="btn_list clearfix"> 
<li><a href="javascript:;" class="aft">视频</a></li> 
<li><a href="http://m.tv.sohu.com/" stat="82452">搜狐</a></li> 
<li><a href="http://www.iqiyi.com/" stat="82453">奇艺</a></li> 
<li><a href="http://www.youku.com/ " stat="90969">优酷</a></li> 
<li><a href="http://m.letv.com/" stat="82461">乐视</a></li> 
</ul>
<ul class="btn_links clearfix"> 
<li><a href="http://m.tudou.com/wap/index" stat="82457">土豆</a></li> 
<li><a href="http://m.funshion.com/index" stat="82456">风行</a></li> 
<li><a href="http://m.baidu.com/video" stat="82455">百度</a></li> 
<li><a href="http://www.vovokan.com/" stat="88998">窝窝看</a></li> 
<li><a href="http://www.y80s.com/" stat="82459">80s</a></li> 
<li><a href="http://m.pps.tv/" stat="82454">PPS</a></li> 
<li><a href="http://www.qire123.com/" stat="82458">奇热</a></li> 
<li><a href="http://m.56.com" stat="86678">56视频</a></li> 
<li><a href="http://v1.roboo.com/proxy/video/search_xcb.jsp" stat="86679">儒豹</a></li> 
<li><a href="http://m.ku6.com/" stat="86680">酷6</a></li> 
<li><a href="http://m.joy.cn/" stat="86681">激动</a></li> 
<li><a href="http://www.tzr1.com/" stat="87674">兔六</a></li> 
<li><a href="http://y.qq.com/" stat="88999">qq音乐</a></li> 
<li><a href="http://m1905.cn/" stat="82460">1905</a></li> 
<li><a href="http://m.duba.com/sp.html" stat="82462">更多</a></li> 
</ul>js部分：function knext(a) {//这就是那个knext方法 在原js文件的最下面声明的
    for (a = a.nextSibling; 1 != a.nodeType; )
        a = a.nextSibling;
    return a
}a = document.getElementsByClassName("aft");
for (b = 0; b < a.length; b++){
    a[b].addEventListener("mousedown", function() {
        var a = this.className, b = knext(this.parentNode.parentNode), c = b.className;
        -1 == a.indexOf("open") ? (this.className = a + " open", b.className = c + " btn_links_open") : (this.className = a.replace(" open", ""), b.className = c.replace(" btn_links_open", ""))
    })
}
上面的样式html js全都是从源码里面复制过来的，试了下~正常运行。