0

Есть контейнер, который хочу открывать, закрывать при клике по стрелке, причем при сворачивании блок с галкой опускается вниз и сама стрелка разворачивается на противоположную, но не могу понять почему toggle не срабатывает. ссылка на фидл

	$('#bottom-arrow').click(function() {
	  $('#fix-bot').toggle('slow');
	});
#fix-bot {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: rgba(153, 0, 0, 0.8);
}
#fix-bot p {
  color: #fff;
  text-align: center;
}
#bottom-arrow {
  position: fixed;
  width: 100%;
  bottom: 50px;
  pointer-events: none;
  height: 23px;
  background: rgba(153, 0, 0, 0.8);
}
#bottom-arrow:before {
  pointer-events: all;
  content: "\f106";
  font-family: 'FontAwesome';
  display: block;
  color: #fff;
  font-size: 50px;
  font-weight: 400;
  position: absolute;
  top: 0;
  left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="bottom-arrow"></div>
<div id="fix-bot">
  <p>Контейнер</p>
</div>

7
  • А где вы нашли метод toggle, который принимает две функции в качестве аргументов. Например, в оф. документации сказано, что если методу передано два аргумента, то первый -- длительность, а второй -- функция, которая будет вызвана по завершению анимации. Иными словами, ваш код работает ровно так, как должен. И toggle тут не причем 19 мая 2016 в 11:35
  • 1
    к тому же toggle уже сам по себе совершает отображение/сокрытие елемента. Поэтому дополнительно вызывать show и hide не надо 19 мая 2016 в 11:40
  • @Dmitriy Simushev вот здесь - jquery-docs.ru/events/toggle (Переключается между двумя или более функциями, вызывающимися поочередно каждым следующим нажатием ЛКМ.) там и пример похожий - неправильно интерепретирую? добавил фидл - jsfiddle.net/JfGVE/1325
    – Вася
    19 мая 2016 в 11:56
  • @Вася, эм... это ваше руководство противоречит официальной документации... либо я совсем уже не соображаю. 19 мая 2016 в 11:59
  • 2
    @Вася, хотя такой метод даже был в jQuery. Однако он удален в версии 1.9. А ваше руководство пора сжечь, как протухшее =) 19 мая 2016 в 12:05

1 ответ 1

1

В качестве решения можно обернуть все в контейнер, с позицией fixed, тогда остальные элементы будут занимать нужные места. И в скрипте нужно будет просто показывать/скрывать абзац.

$('#bottom-arrow').click(function() {
  $(this).toggleClass('toggled');
  $('#fix-bot').toggle('slow');
});
#bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: rgba(153, 0, 0, 0.8);
  text-align: center;
}
#fix-bot {
  height: 50px;
}
#fix-bot p {
  color: #fff;
}
#bottom-arrow {
  width: 100%;
  pointer-events: none;
  height: 23px;
  background: rgba(153, 0, 0, 0.8);
}
#bottom-arrow:before {
  pointer-events: all;
  content: "\f106";
  font-family: 'FontAwesome';
  color: #fff;
  font-size: 50px;
  font-weight: 400;
  line-height: 17px;
  transition: transform linear 0.5s;
  display: inline-block;
}
#bottom-arrow.toggled:before {
  content: "\f107";
}
body {
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="bottom">
  <div id="bottom-arrow"></div>
  <div id="fix-bot">
    <p>Контейнер</p>
  </div>
</div>

8
  • да, только осталось еще стрелку научить переворачиваться)
    – Вася
    19 мая 2016 в 14:01
  • @Вася, ну так this - это блок со стрелкой, присвой ему класс и будет переворачиваться
    – Grundy
    19 мая 2016 в 14:10
  • 1
    @Вася, добавил в пример изменение значка
    – Grundy
    19 мая 2016 в 14:20
  • да, точно - отлично!
    – Вася
    19 мая 2016 в 14:32
  • 1
    @Вася, тут стоит смотреть в сторону touch событий по аналогии с перетаскиванием
    – Grundy
    20 мая 2016 в 8:38

Ваш ответ

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

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