Не работают стили css в jQuery

201
14 августа 2018, 03:20

Пытаюсь вызывать меню по клику на элемент div

Хочу чтобы по клику на элемент с id="open_menu_id" CSS стиль display у элемента menu_box менялся на block Вот этот код:

$(document.ready(function() { 
  $('#menu_box').css('display', 'none'); 
  $('#open_menu_id').click(function() { 
    $('#menu_box').css('display', 'block'); 
  }); 
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="menu-bar"> 
  <li class="menu"> 
    <div class="person"> 
      <img class="user_img" src="../images/user.png" alt="user" /> 
      <div id="open_menu_id" class="open_menu">admin</div> 
    </div> 
    <ul id="menu_box" class="menu_2"> 
      <a href=""> 
        <li class="menu_item">Профиль</li> 
      </a> 
      <a href=""> 
        <li class="menu_item">Настройки</li> 
      </a> 
      <a href=""> 
        <li class="menu_item">Выход</li> 
      </a> 
    </ul> 
  </li> 
</ul>

Но ничего не работает. Я только начинаю разбираться с jQuery, подскажите, что делаю не правильно.

Answer 1

Вы просто перепутали и написали: 

$(document.ready(function () {
}));

А надо: 

$(document).ready(function() {
});

P.S. Так же можно использовать метод .show(), .hide(), чтобы отобразить блок, вместо присвоения стилей вручную.

.show(): This is roughly equivalent to calling .css( "display", "block" )

.hide(): This is roughly equivalent to calling .css( "display", "none" )

$(document).ready(function() { 
  $('#menu_box').hide() 
  $('#open_menu_id').click(function() { 
    $('#menu_box').show() 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="menu-bar"> 
  <li class="menu"> 
    <div class="person"> 
      <img class="user_img" src="../images/user.png" alt="user" /> 
      <div id="open_menu_id" class="open_menu">admin</div> 
    </div> 
    <ul id="menu_box" class="menu_2"> 
      <a href=""> 
        <li class="menu_item">Профиль</li> 
      </a> 
      <a href=""> 
        <li class="menu_item">Настройки</li> 
      </a> 
      <a href=""> 
        <li class="menu_item">Выход</li> 
      </a> 
    </ul> 
  </li> 
</ul>

READ ALSO
chrome.tabs.executeScript|insertCss срабатывает через раз
javascript

chrome.tabs.executeScript|insertCss срабатывает через раз

Добавляю стили и скрипты на определенный сайт в background

 176
Как синхронно выполнить промисы в цикле? [дубликат]
javascript

Как синхронно выполнить промисы в цикле? [дубликат]

На данный вопрос уже ответили:

 194
webpack 4 MiniCssExtractPlugin и webpack-merge
javascript

webpack 4 MiniCssExtractPlugin и webpack-merge

Пытаюсь настроить webpack4 , всё работает как надо, за исключением выноса стилей из js файлабез webpack-merge работает, с webpack-merge не видит файла

 231
Log-out из сервера авторизации
javascript

Log-out из сервера авторизации

На Angular2 для OIDC/OAuth2 авторизации я использую "oidc-client-js" библиотекуСтандартно, для обновления токенов используется silent-refresh

 158