Question

我有一个大约500 div的页面，如下所示。

<div onclick='test()' class='test>
     <ul class='innermenu'>
       <li>1</li>
       .....
      </ul>
  </div>

当调用测试函数时，它需要隐藏调用该函数的菜单（innermenu）。

我的问题是

唯一标识div而不使用id
如何仅隐藏特定的ul。

Answer 1

好的，首先是快速修复，虽然这不是在页面上使用JS的最佳方式：

将通话更改为：

<div onclick="test(this);" class="test">

然后，在测试中，使用：

function test(el){
   var uls = el.getElementsByTagName('ul');
   for(var i = 0; i < uls.length; i++){
      if(uls[i].className == 'innermenu'){
         uls[i].style.display = "none";
         break;
      }
   }
}

这会隐藏所点击的ul的孩子div。

更好的方法

好的，答案更长。使用attachEvent和addEventListener将事件附加到事件之后，或使用类似jQuery的库来帮助您。这是原始解决方案：

以这种方式设置HTML（无onclick）：

<div class="test">

然后在你HTML的最后把这个：

<script type="text/javascript">
    var divs = document.getElementsByTagName('div');
    function test(){
      var uls = this.getElementsByTagName('ul');
      for(var i = 0; i < uls.length; i++){
         if(uls[i].className == 'innermenu'){
            uls[i].style.display = "none";
            break;
         }
      }
    };

    for(var i = 0; i < divs.length; i++){
      var div = divs[i];
      if(div.className !== "test") continue;
      if(window.addEventListener){
         div.addEventListener( 'click', test, true ); //FF, Webkit, etc
      } else if (window.attachEvent) {
         div.attachEvent('onclick', test); // IE
      } else {
         div.onclick = test; // Fallback
      }
    }
</script>

现在，您的HTML中没有JavaScript代码，您可以摆脱test函数上的额外参数。

Answer 2

有一种方法

<强> document.getElementsByClassName

但并非所有浏览器都支持。

的javascript

function test(elem)
{
    var childElem = elem.children[0];
    childElem.style.display = 'none';
}

<div onclick='test(this)' class='test'>
    <ul class='innermenu'>
        <li>1</li>
        <li>2</li>
    </ul>
</div>

如果你可以使用jQuery那么你可以做这样的事情

$("div.test").click(function(){
    $(this).find("ul.innermenu").hide();
});

Answer 3

如果您不想分配ID，可以尝试这样来隐藏被点击的div：

<div onclick="hideMe(this);" class='test>

<script>
 function hideMe(elem)
 {
   elem.style.display = 'none';
 }
</script>

Answer 4

尝试将“this”作为参数传递：

<div onclick='test(this)' class='test>
 <ul class='innermenu'>
   <li>1</li>
   .....
  </ul>

 function test(sender) {
        //sender is DOM element that is clicked
        alert(sender.id);
    }

Answer 5

如@rahul所述的所有浏览器都不支持getElementsByClassName，您可以遍历dom并自行查找 - 前提是只有一个<ul>具有类名{{} 1}}

"innermenu"

访问没有id的DOM元素

5 个答案: