Как при клике на меню показать, а потом скрыть элемент?

Рейтинг: 0Ответов: 2Опубликовано: 15.06.2011

При первом клике открыл, при втором клике закрыл

<div id="aa" 
    style="width:100px;background:red;cursor:pointer;color:white;">
asdasd
</div>
<div id="abc" style="width:100px;background:green;display:none;">
css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят
<script type="text/javascript">
function switchDisplay(id) {
  var el = document.getElementById(id);
  if (!!el)
    el.style.display = (el.style.display=='none')?'':'none';
  return false;
  }
</script>

<div id="aa" style="width:100px;background:red;cursor:pointer;color:white;"> asdasd </div>

<div id="abc" style="width:100px;background:green;display:none;">menu item 1</div>
▲ 3
<script>
function openHide(x)
{
    var u = x.getElementsByTagName('ul'), i = 0;
    while(u[i])
    {
        if(u[i].parentNode == x)
            if(u[i].style.display == 'none')
                u[i].style.display = '';
            else
                u[i].style.display = 'none';

        ++i;
    }
}
</script>
<ul>
    <li><a>Пункт1</a>
        <ul style="display:none">
            <li>Пункт1.1</li>
            <li>Пункт1.2</li>
            <li>Пункт1.3</li>
            <li>Пункт1.4</li>
        </ul>
    </li>
</ul>

Это общий принцип. По-хорошему, скрывать меню и навешивать событие onclick надо через js.