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

[ShunYea]

这个网址导航，金山手机版的，m.duba.com

下面分类例如：视频、小说、彩票等li元素，点击了对应的ul就展开或者收缩，请问这个写法是怎么实现的？

谢谢。

[Go 旅城通票]

不就是设置目标容器的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>

[ShunYea]

引用 6 楼 showbo 的回复:

不就是设置目标容器的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>

谢谢，你这个是用了另种方法吧。

[Go 旅城通票]

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

[ShunYea]

引用 8 楼 showbo 的回复:

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

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

[Go 旅城通票]

毒霸那个通过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",""))}) }

[ShunYea]

引用 10 楼 showbo 的回复:

毒霸那个通过dom关系获取的，在http://m.duba.com/static/js/v1/min.touch.js?v=201311141625

嗯，我就是把这些字符：

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文件，然后调用，貌似没效果，是不是还写漏了什么呢？请教。

[ShunYea]

引用 10 楼 showbo 的回复:

毒霸那个通过dom关系获取的，在http://m.duba.com/static/js/v1/min.touch.js?v=201311141625

对了，这个链接是不是写错了？

<li><a href="javascript:;" class="aft">视频</a></li>

[Go 旅城通票]

要用导入他那个类库，不是只粘贴他的那个代码就行的，他还引用了其他代码 。。实现原理代码就是我发给你的，只是增加了id，何必一定要用他的。。 自己慢慢摸了

[quancaixu]

咯 路过啊

[似梦飞花]

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

[ShunYea]

引用 1 楼 zzgzzg00 的回复:

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

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

[阿鱼]

找一下源码就知道了~如下：
(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’；

[阿鱼]

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全都是从源码里面复制过来的，试了下~正常运行。

[ShunYea]

引用 20 楼 qwklove 的回复:

上面的样式html js全都是从源码里面复制过来的，试了下~正常运行。

非常感谢啊，我试试看。

[阿鱼]

引用 5 楼 ShunYea 的回复:

[quote=引用 3 楼 qwklove 的回复:] 找一下源码就知道了~如下：

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

[阿鱼]

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

[ShunYea]

引用 13 楼 showbo 的回复:

要用导入他那个类库，不是只粘贴他的那个代码就行的，他还引用了其他代码 。。实现原理代码就是我发给你的，只是增加了id，何必一定要用他的。。 自己慢慢摸了

谢谢，那我研究看看了。

[ShunYea]

引用 16 楼 qwklove 的回复:

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

呵呵，你说的好抽象，不懂了。

[ShunYea]

引用 16 楼 qwklove 的回复:

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

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

[我叫刘小二]

楼主做出来没，贴个图看看啊