0

我正在尝试更改嵌套在一组 div 中的 UL 上的样式。

这是我所拥有的：

html:

<div class='mainCat' id='List' onclick="Expand(this.id);">List</div>
  <div class='subCat'>
  <ul>
  <li>List item one</li>
   <li>List item two</li>
  <li>List item three</li>
</ul>
 </div>
</div>

和 Javascript：

function Expand(set)
 {
  var whichSet = document.getElementById(set);
  whichSet.getElementsByTagName('ul')[0].style.display = 'block';
 }

和 CSS：

 .subCat ul    
  {
  display:none;
  }

任何帮助深表感谢。解释我做错了什么而不仅仅是答案会非常有帮助，因为我喜欢从我的错误中吸取教训。提前致谢。

4

3 回答 3

2

我已经为您的案例创建了一个有效的JSFiddle。

您的 DOM 结构不正确。您在元素之前有一个结束 div 标签List。你应该删除它。

此外，我不会使用内联事件，因为这是一种不好的做法。我把它移到了一个addEventListener函数中，它可以更好地分割 Javascript 事件的 DOM 结构

因此，您的代码变为：

<div class='mainCat' id='List'>
    List
    <div class='subCat'>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
     </div>
</div>

并将以下内容添加到您的 Javascript 中：

document.getElementById("List").addEventListener("click", function(e) {
    Expand(this.id);
}, true);

它应该可以工作。

于 2013-08-15T06:42:55.667 回答
1

您getElementsByTagName在“set”元素内部使用，但那是mainCat div，而不是subCatdiv。ul不是那个div的孩子。

此外，您不需要该this.id零件。

我更改了代码，所以 subCat 是一个 id。（也许你打算那subCat是一个孩子mainCat？如果是这样，你</div>在单词旁边有一个额外的List）

这是一个固定的例子：http: //jsfiddle.net/4ndEf/

js：

function Expand(set) {
    var whichSet = document.getElementById(set);
    whichSet.getElementsByTagName('ul')[0].style.display = 'block';
}

html:

<div class='mainCat' id='List' onclick="Expand('subCat');">List</div>
<div id='subCat'>
    <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
</div>

CSS：

 #subCat ul {
     display:none;
 }
于 2013-08-15T06:41:33.213 回答
1

正如克里斯和乔纳森·佩蒂科拉斯所说。

但是你也可以用 jQuery 来简化它

$("#list").click(function(){
    $('ul').css('display', 'block');
});

我会在列表中设置这个 CSS，所以用户可以看到它是可点击的

#list {
    cursor: pointer;
}

在这里摆弄 http://jsfiddle.net/uYuST/

于 2013-08-15T06:43:59.743 回答