Блог

Главная - Вопросы по программированию - Почему я не могу отобразить элемент с помощью метода jQuery show?

Почему я не могу отобразить элемент с помощью метода jQuery show?

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть этот <ul> элемент:

 <ul id="inspectorMenu" class="nav pull-left" style="visibility: hidden;">
    <li style="display: inline-block;text-align: center; max-height:35px;">
        <a class="navbar-brand" ui-sref="sites.list" style="padding: 11px 09px;" title="אתרים">
            <i class="glyphicon glyphicon-tree-conifer"></i>
        </a>
    </li>
    <li style="display: inline-block;text-align: center;max-height:35px;">
        <a class="navbar-brand" ui-sref="sitesDamages.sitesList" style="padding: 11px 09px;" title="אירועים">
            <i class="glyphicon glyphicon-exclamation-sign"></i>
        </a>
    </li>
</ul>

В какой-то момент я вызываю эту строку jQuery, чтобы показать <ul> элемент:

 $("#inspectorMenu").show();

Но <ul> элемент не отображается.

Есть идеи, почему <ul> элемент не отображается? Что я делаю не так?

Комментарии:

1. Я не знаю, упоминал ли кто-нибудь об этом или нет, но jQuery внес некоторые большие изменения в hide / show из-за несоответствий с ними.

2. Если вы не хотите изменять свой код, используйте $("#inspectorMenu").css("visibility", "visible")

Ответ №1:

возможно, вам придется перейти visibility с hidden на visible на, чтобы отобразить элемент

Ответ №2:

jQuery show примерно такой же, как добавление css «display: block». Таким образом, видимость на вашем ul все равно будет актуальной. Рассмотрите возможность использования «display: none», а затем вы можете использовать .show() его для отображения.

 $("#showMe").on("click", function(){
  $("#inspectorMenu").show()
})  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="inspectorMenu" class="nav pull-left" style="display: none;">
  <li style="display: inline-block;text-align: center; max-height:35px;"><a class="navbar-brand" ui-sref="sites.list" style="padding: 11px 09px;" title="אתרים"><i class="glyphicon glyphicon-tree-conifer">Some Text</i></a>
  </li>
  <li style="display: inline-block;text-align: center;max-height:35px;"><a class="navbar-brand" ui-sref="sitesDamages.sitesList" style="padding: 11px 09px;" title="אירועים"><i class="glyphicon glyphicon-exclamation-sign">Some More Text</i></a>
  </li>
</ul>

<button id="showMe">Show Me</button>