0

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

	$('#arrow-slide1').click(function() {
	  $('#gallary-hide1').toggle(200);
	  $('#arrow-slide1').toggle();
	  $('#arrow-slide1-up').toggle();
	});
.gallary-hide {
  display: none;
}
.arrow-slide {
  background: #fff url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png") no-repeat;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
.arrow-slide-up {
  background: #fff url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat;
  display: none;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="arrow-slide1" class="arrow-slide"></span><span id="gallary-hide1" class="gallary-hide">[Best_Wordpress_Gallery id="2" gal_title="party"]</span><span id="arrow-slide1-up" class="arrow-slide arrow-slide-up"></span>

1 ответ 1

2

toggle не учитывает какой параметр display стоит в стилях у элемента.

Используйте .toggleClass()

html

<span class="myspan span-hidden">test</span>

css

.myspan{
    display: block;
}
.myspan.span-hidden{
    display: none;
}

jquery

  $(".myspan").toggleClass('span-hidden');
1
  • или оказывается проще - заменить span на div
    – Вася
    23 сен 2016 в 9:25

Ваш ответ

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

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