JS 小问题！懂的LOOK LOOK

<li>页面问题
<img src="" alt="on" width="10" height="10" onclick="javascript:onopen(this)"/>
<ul>
<li>123132</li>
<li>123132</li>
<li>123132</li>
</ul>
</li>点击IMG图片想让他改变下级 ul 的style 属性。可JS这么写代码似乎不对。。
<script type="text/JavaScript">
function onopen(value){
value.nextSibling.style.display = '';
}
</script>还有img下面的ul 不存在设id 或name 的属性。。想通过节点的方式或取。谢谢。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

用nextSibling获取到的是一个文本节点（因为img标签后面有个换行符），可以用下面这种方法获取对象：
function onopen(value) {
    value.parentNode.getElementsByTagName('ul')[0].style.display = 'none';
}
兄台这个似乎不行的。因为不止一个UL哦。还有。<li>页面问题顶部还有UL。整个代码如下。
<div class="block">
<ul>
<li>页面街头问题
<img src="" alt="on" width="10" height="10" onclick="javascript:onopen(this)"/>
<ul>
<li>123132</li>
<li>123132</li>
<li>123132</li>
</ul>
</li>
<li>ceshiyi
<ul>
<li>123132</li>
<li>123132</li>
<li>123132</li>
</ul>
</li>
<li>ceshiyi
<ul>
<li>123132</li>
<li>123132</li>
<li>123132</li>
</ul>
</li>
<li>ceshiyi
<ul>
<li>123132</li>
<li>123132</li>
<li>123132</li>
</ul>
</li>
</ul>
</div>
厉害学习了。
<img src="" alt="on" width="10" height="10" onclick="javascript:onopen(this)"/><ul>
<li>123132</li>
<li>123132</li>
<li>123132</li>
</ul>
粘一起就能弄了。
那用两次nextSibling，用ie6、8，Safari、Opera5、FF4、Chrome12测试过都没问题，但是感觉还是不太保险，因为以前好像看到过资料说不同浏览器处理nextSibling的方法是有区别的。。
function onopen(value) {
    value.nextSibling.nextSibling.style.display = 'none';
}
兄台我怎么测试了没有任何反映。。IE6.0 FF4 下
用FireBug或别的浏览器下的js控制台看看有没有报错。
<script type="text/JavaScript">
function onopen(value){
var childs = value.parentNode.childNodes;
for(var i=0;i<childs.length;i++){
if(childs[i].nodeName.toLowerCase() == 'ul'){
childs[i].style.display = '';
}
}
}
</script>
function onopen(obj)
{
   while(true){

      if(obj.nextSibling.tagName == 'UL'){
          obj.nextSibling.style.display = '';
          break;
      }
      else{
          obj  = obj.nextSibling;
      }
   }
}
不同浏览器处理nextSibling的方法是有区别的：
ie6/7/8 一个效果；
ie9,firefox,chrome 一个效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div class="block">
  <ul>
    <li>
      页面街头问题
      <img style="display:block;cursor:pointer;" src="http://home.blueidea.com/attachment/201106/2/498048_13070269434RZR_t.png" alt="on" width="50" height="50" onclick="onopen(this)"/>
      <ul>
        <li>123132</li>
        <li>123132</li>
        <li>123132</li>
      </ul>
    </li>
    <li>
      ceshiyi
      <ul>
        <li>123132</li>
        <li>123132</li>
        <li>123132</li>
      </ul>
    </li>
    <li>
      ceshiyi
      <ul>
        <li>123132</li>
        <li>123132</li>
        <li>123132</li>
      </ul>
    </li>
    <li>
      ceshiyi
      <ul>
        <li>123132</li>
        <li>123132</li>
        <li>123132</li>
      </ul>
    </li>
  </ul>
</div>
<script type="text/javascript">

function onopen(ele){
var nextAllUl = getAllUl(ele);
for(var i=0; i<nextAllUl.length; i++){
dispalyFn(nextAllUl[i]);
}
}
/**
* 显示控制
* @param {Object} nextEle
*/
function dispalyFn(nextEle){
nextEle.style.display = nextEle.style.display == '' || nextEle.style.display == 'block' ? 'none' : 'block';
}
/**
* 得到全部的ul
* @param {Object} ele
*/
function getAllUl(ele){
var headerUl = ele.parentNode.parentNode;
if(headerUl.tagName.toLowerCase() == 'ul'){
var uls = headerUl.getElementsByTagName('ul');
}
console.log(uls);
return uls;
}
</script>
</body>
</html>
如果是jquery的话方便多了
$(this).hide();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div class="block">

     <li>
      <img style="display:block;cursor:pointer;" src="http://home.blueidea.com/attachment/201106/2/498048_13070269434RZR_t.png" alt="on"       width="50" height="50" onclick="onopen(this)"/>

      <ul>
  wwww
        <li>123132</li>
        <li>123132</li>
        <li>123132</li>
      </ul>
    </li>
</div>
<script type="text/javascript">
function onopen(value)
{
if(value.parentNode.getElementsByTagName('ul')[0].style.display=='block')
{
value.parentNode.getElementsByTagName('ul')[0].style.display = 'none';
}
else
{
value.parentNode.getElementsByTagName('ul')[0].style.display = 'block';
}
}
</script>
</body>
</html>
(*^__^*)