Menu > Submenu

[PatrickLutherdeck 0]

<li id="submenuli"><i class="dashicons dashicons-welcome-write-blog"></i><span> Editar Paginas</span>
  <ul id="sub-menu">
    <li>Sobre dashing.net</li>
  </ul>
</li>

Alguem me ajuda com um codigo js, Quando clica na linha 1 o #sub-menu da DISPLAY:block e quando clica novamente DISPLAY:NONE ?

 

Obrigado!

[reebr 94]

<!-- html -->
<li id="submenuli">
  <i class="dashicons dashicons-welcome-write-blog"></i><span> Editar Paginas</span>
  <ul id="sub-menu" class='hide'>
    <li>Sobre dashing.net</li>
  </ul>
</li>

/* css */
.hide { display: none }

/* javascript */
var $submenu   = document.getElementById('sub-menu'),
    $submenuLi = document.getElementById('submenuli');

$submenuLi.onclick = function(){
    $submenu.classList.toggle('hide');
};
// https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

DEMO

 

____

 

Ou então:

<li id="submenuli">
  <i class="dashicons dashicons-welcome-write-blog"></i><span> Editar Paginas</span>
  <ul id="sub-menu">
    <li>Sobre dashing.net</li>
  </ul>
</li>

var $submenu   = document.getElementById('sub-menu'),
    $submenuLi = document.getElementById('submenuli');
    $submenu.style.display = 'none';

$submenuLi.onclick = function(){
    var display = window.getComputedStyle($submenu, null)
                        .getPropertyValue('display');
    $submenu.style.display = (display == 'block') ? 'none' : 'block';
}
// https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

DEMO