Question

关于一个前端HTML的问题.通过javascript的onclick事件来改变<span>的display值.但是遇到一个问题~

<li>
<span class="short">简短文字<a href="#">点击此处</a></span>
<span class="all" style="display:none;">完整的文字</span>
</li>
<li>
<span class="short">简短文字<a href="#">点击此处</a></span>
<span class="all" style="display:none;">完整的文字</span>
</li>
<li>
<span class="short">简短文字<a href="#">点击此处</a></span>
<span class="all" style="display:none;">完整的文字</span>
</li>

我现在有多个这样的li,然后我想点击那个"简短文字"后面的a标签以后,简短文字的<span>的display改为none,完整文字的<span>的display改为inline.

同时还有个要求就是,点的哪个li,就改变哪个li,比如我点的第二个li的a标签,那么就只改变第二个li里面的两个<span>的属性,而第一个和第三个的<span>不变~

Answer 1

不用这么麻烦,我这种最适合小弟
<script type ="text/javascript">
function hide(obj){
obj.parentNode.nextSibling.style.display="inline";//取父节点的兄弟节点就OK了
}
</script>
//html代码
<li><span class="short">简短文字<a href="#" onclick ="hide(this)">点击此处</a></span><span class="all" style="display: none;">
完整的文字</span> </li>
<li><span class="short">简短文字<a href="#" onclick ="hide(this)">点击此处</a></span><span class="all" style="display: none;">
完整的文字</span> </li>
<li><span class="short">简短文字<a href="#" onclick ="hide(this)">点击此处</a></span><span class="all" style="display: none;">
完整的文字</span> </li>

不瞒您说,这个有个小小缺点,<span></span>这标记之间不能有空格和换行,其它一切运行正常,原因很简单,有空格和换行就取不到span标记了,这不影响你正常使用和界面的布局哦
本程序已通过上机测试,祝你好运!

追问

不能有空格是指的程序中还是输出中?

追答

程序代码中，在页面解析的时候不影响任何美观，IE会自动过滤掉换行和空格，嘿嘿
捣鼓出来了没
还有其它疑问没？

Answer 2

var shorts = document.getElementsByClassName('short');

for(var i =0,l=shorts.length;i<l;i++){
shorts[i].getElementsByTagName('a')[0].onclick=function(){
var p = this.parentNode().parentNode();//找到父li节点
p.getElementsByClassName('short')[0].style.display="none"
p.getElementsByClassName('all')[0].style.display=""
}

}

当然，如果你使用jquery的话，可以更简单
$('.short a').live("click",function(){
$(this).parent().hide().siblings('.all').show()
})

追问

是点击此处

然后

function demo(){
[你给的程序片段]

}

这样吗?

追答

不用onclick = ... ,直接在dom下面写...就可以了

你如果在属性里写onclick=“demo(this)”的话，也可以在页面中写：

function demo(ele){
var p = ele.parentNode().parentNode();//找到父li节点
p.getElementsByClassName('short')[0].style.display="none"
p.getElementsByClassName('all')[0].style.display=""
}

这样

追问

不行啊..它每次点了都相当于是刷新了页面...我在后面加了一个return false;都不行..

追答

呃，写错了，this.parentNode.parentNode ,这个是属性不是方法:)

var p = this.parentNode.parentNode;//找到父li节点
p.getElementsByClassName('short')[0].style.display="none"
p.getElementsByClassName('all')[0].style.display=""

追问

点击以后.它提示
'this.parantNode.parantNode'为空或不是对象

没有,我的问题,,我没把'this'改成'ele'

还有一个问题就是,我如果再点击另外一个标签,那么之前点的那个li的属性恢复到原值,这个应该怎么实现呢?

Answer 3

修改<a href="javascript:void(0)" onclick="demo(this)">点击此处</a>

这样试试··

追问

可以了,现在不跳转了.但是我点了以后没能改变display的值
...

demo(ele){
var p = ele.parentNode().parentNode();//找到父li节点
p.getElementsByClassName('short')[0].style.display="none";
p.getElementsByClassName('all')[0].style.display="";
}

追答

function demo(ele){
....
}