使用javascript嵌套在div中的已修改html元素

Question

I'm trying to change a style on a UL that is nested in a set of divs.

Here is what I have:

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>

and Javascript:

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

and CSS:

 .subCat ul    
  {
  display:none;
  }

Any help is much appreciated. An explanation of what i'm doing wrong instead of just the answer would be really helpful as i like to learn from my mistakes. Thanks in advance.

Answer 1

I have created a working JSFiddle with your case.

Your DOM structure is incorrect. You have a closing div tag just before List element. You should remove it.

Furthermore, I would have not use an inline event, as it is a bad practice. I moved it to a addEventListener function, which splits better DOM structure of Javascript events

So, your code becomes:

<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>

And adds the following to your Javascript:

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

It should works then.

Answer 2

You are using getElementsByTagName inside the "set" element, but that is the mainCat div, not the subCat div. The ul is not child of that div.

Also, you don't need the this.id part.

I changed the code, so subCat is an id instead. (Maybe you intended that subCat were a child of mainCat ? if that is the case, you have an extra </div> next to the word List )

Here is a fixed example: 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;
 }

Answer 3

As chris and Jonathan Petitcolas said.

But you can also simplify it with jQuery

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

I would set this CSS on list, so the user can see it is clickable

#list {
    cursor: pointer;
}

Fiddle here http://jsfiddle.net/uYuST/