JS using onclick event on li to display block

Question

HTML:

<script>function dropdown()
{        console.getElementById("").style.display="block";
}</script>
<div id="dropdown">
    <ul>
        <li onclick="dropdown()"><a>Menu</a>
             <ul id="Menuitems">
                 <li><a href="">item 1</a> </li>
                 <li><a href="">item 2</a> </li>
                 <li><a href="">item 3</a> </li>
            </ul>
        </li>
    </ul>
</div>

Css:

#dropdown ul{
 display: block; 
}
#dropdown ul li {
     display: block;
     background-color: #558c89;
     color: #ffffff; 
}
#dropdown ul li ul {
     display: none; 
}
#dropdown ul li:hover > ul { /*this is what the onclick event should do*/
     display: block; 
}

The onclick should start the function "dropdown()" which needs to: "display: block;" on #dropdown ul li

@techouse meta.stackoverflow.com/questions/253086/code-block-adjustment — Niet the Dark Absol
– Niet the Dark Absol, Commented May 20, 2014 at 13:42
where is your html? create a jsfiddle and what is your question? — Aamir Afridi
– Aamir Afridi, Commented May 20, 2014 at 13:42

roobeedeedada · Accepted Answer · 2014-05-20 13:52:09Z

3

You're missing the list ID and you're calling the selector on the console (when you want to be selecting on the document).

<script>
function dropdown()
{        
    document.getElementById("Menuitems").style.display="block";
}
</script>
<div id="dropdown">
    <ul>
        <li onclick="dropdown()"><a>Menu</a>
             <ul id="Menuitems">
                 <li><a href="">item 1</a> </li>
                 <li><a href="">item 2</a> </li>
                 <li><a href="">item 3</a> </li>
            </ul>
        </li>
    </ul>
</div>

JSFiddle: http://jsfiddle.net/tmaB9/

answered May 20, 2014 at 13:52

roobeedeedada

5214 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niet the Dark Absol · Accepted Answer · 2014-05-20 13:44:08Z

2

Try:

<li onClick="dropDown(this);">

This is important, so your function knows which element you clicked on. Then...

function dropDown(li) {
    var submenu = li.getElementsByTagName('ul')[0];
    if( submenu) {
        submenu.style.display = submenu.style.display == "block" ? "" : "block";
    }
}

This will toggle the visibility of the submenu :)

answered May 20, 2014 at 13:44

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Comments

EaziLuizi · Accepted Answer · 2014-05-20 13:47:39Z

0

here is a quick example of what i think you want (provided you can use JQuery):

    $(document).ready(function () {
        $('#dropdown ul li').on('click', function dropdown() {
            //console.getElementById("").style.display = "block";
        });
    });

<div id="dropdown" class="dropdown">
    <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
        <li>menu 4</li>
    </ul>
</div>

answered May 20, 2014 at 13:47

EaziLuizi

1,6151 gold badge18 silver badges25 bronze badges

Collectives™ on Stack Overflow

JS using onclick event on li to display block

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related