Anna_Polyakovich
@Anna_Polyakovich
Начинающий дизайнер, осваиваю html, css, js

Как поменять положение элементов при применении скрипта JS?

Здравствуйте!
Не получается реализовать показ и скрытие кнопки по клику.
<div class="icon-bar">
<span class="social-title"></span>
  <a href="#" class="facebook"><i class="fa fa-paper-plane"></i></a>
  <a href="#" class="twitter"><i class="fa fa-whatsapp"></i></a>
  <a href="#" class="google"><i class="fa fa-envelope"></i></a>
  <a href="#" class="linkedin"><i class="fa fa-phone"></i></a>
  <a href="#" class="youtube"><i class="fa fa-map-marker"></i></a>
</div>


/* Фиксированная панель значков */
.icon-bar  {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.icon-bar .social-title::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 30px;
  bottom: 0;
  width: 60px;
  height: 60px;
background-repeat: no-repeat;
background-position: top;
background-size: cover;
background-image: url(/images/icons/comment.png);
}


/* Стиль ссылок на панели значков */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
  display: none;
}


/* Стиль иконки социальных медиа с цветом */
.icon-bar a:hover {
  background-color: var(--dark-color);
}

.facebook {
  background: #0088cc;
  color: white;
}

.twitter {
  background: #075e54;
  color: white;
}


.google {
  background: var(--hover-color);
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}


$('.icon-bar').click(function() {
	$('.icon-bar>a').toggle('display');
});


Как это выглядит без скрипта (и как задумывалось):
элементы расположены вертикально, кнопка, вызывающая их не мешает
65dd77c945350838893734.jpeg

Как выглядит после применения скрипта:
элементы вдруг становятся inline (видно в панеле в браузере)
65dd7850059c0531015100.jpeg

После долгих попыток исправить ситуацию, сдаюсь и обращаюсь за помощью!
Что нужно исправить или дописать в скрипте, чтобы элементы выстраивались вертикально, и не превращались в inline?
Заранее благодарю за помощь!
  • Вопрос задан
  • 103 просмотра
Решения вопроса 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Поскольку у вас изначально установлено display: none, то toggle просто убирает свойство display и оно становится дефолтным для a, то есть inline.
Варианты:
- поместить все иконки в общий div и переключать его;
- переключать класс, на основе которого в CSS менять свойство display.

Из ошибок с ходу:
- тэг i не стоит использовать для иконок, семантически он предназначен для выделения фрагмента текста, например технического термина или идиоматическтого выражения;
- 'display' в первом параметре toggle не имеет смысла, там может быть длительность переключения, объект с параметрами или логическое значение, но не произвольная строка.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы