0

Хочу написать менюшку на jQuery. Проблема в том что не смог проверить скрыт элемент или нет , знаю про свойства hide(),show(), toggle() но как с ними проверить?

$(document).ready(function() {
      $('#toggle').click(function() {
          $('#sub_menu').toggle();
          if ( //#sub_menu не скрыт)
            {
              alert('sub menu opened')
            } else {
              alert('sub menu closed')
            }
          })
      });
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul li {
  display: inline-block;
  min-width: 90px;
  padding: 7px 12px;
  background: #999;
  color: #fff;
  text-align: center;
  cursor: pointer;
  border: #aaaaaa;
  position: relative;
}
ul li ul {
  display: none;
  position: absolute;
  width: 120px;
  top: 35px;
}
ul li ul>li {
  background: #fff;
  color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>

  <ul>
    <li id='toggle'>Home
      <ul id='sub_menu'>
        <li>subItem1</li>
        <li>subItem2</li>
        <li>subItem3</li>
        <li>subItem4</li>
      </ul>
    </li>

    <li>About</li>

    <li>Contact</li>

    <li>Log out</li>

  </ul>
</div>

2 ответа 2

5

Попробуйте проверить .is(':visible')

Т.е. в Вашем случае что-то типа такого:

  if ($('#sub_menu').is(':visible'))
    {
      alert('sub menu opened')
    } else {
      alert('sub menu closed')
    }
  })
1
  • спасибо работает :) но :visible это псевдокласс CSS3 и с ним могут быть проблемы в старых браузерах ?
    – Robert Key
    1 окт 2015 в 6:44
1

В документации написано, что hide() - эквивалент такой записи: .css( "display", "none" ).

Соответственно проверить, скрыт ли элемент можно, например, так:

if ($(elem).css('display') == 'none') {
    console.log('скрыт');
} else {
    console.log('виден');
}

Либо же, используя Vanilla JS:

if (elem.style.display == 'none') {
    console.log('скрыт');
} else {
    console.log('виден');
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.