@gogadesign

Как закрыть div при повторном нажатии на ссылку?

Здравствуйте!

Существует html-разметка:

<a href="#div1" class="link">Первая</a>
  <a href="#div2" class="link">Вторая</a>
  <a href="#div3" class="link">Третья</a>
  <a href="#div4" class="link">Четвертая</a>
  <br><br>
  <div class="bar" id="div1">Текст1</div>
  <div class="bar" id="div2">Текст2</div>
  <div class="bar" id="div3">Текст3</div>
  <div class="bar" id="div4">Текст4</div>


Существует след. скрипт:

<script>
$(function() {
	$('.link').on('click', function(e) {
		e.preventDefault();
		$('.bar').each(function() {
			$(this).css('display', 'none');
		});
		var block = $(this).attr('href');
		$(block).css('display', 'block');
	});
});
</script>


Хочется, чтобы div скрывался при повторном нажатии на ссылку.
Спасибо.
  • Вопрос задан
  • 171 просмотр
Решения вопроса 1
Lumore
@Lumore
Front-end developer
<script>
  $(document).on('click', '.link', function(e) {
    $(this).addClass('link_clicked');
    e.preventDefault();
    $('.bar').each(function() {
      $(this).css('display', 'none');
    });
    var block = $(this).attr('href');
    $(block).css('display', 'block');
  });

 $(document).on('click', '.link_clicked', function(e) {
    e.preventDefault();
    $(this).removeClass('link_clicked');
    var block = $(this).attr('href');
        $(block).css('display', 'none');
    });
})
</script>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@kvalood
Может так?
https://jsfiddle.net/zpgfe8av/

P.S. Код так себе...

$(function() {
  $('.link').on('click', function(e) {
    e.preventDefault();
    $('.bar').each(function() {
      $(this).css('display', 'none');
    });
    
    var block = $(this).attr('href');
    
    if($(this).hasClass('active')) {
    	$(this).removeClass('active');
      $(block).css('display', 'none');
    }
    else {
    	$(this).addClass('active');
      $(block).css('display', 'block');
    }    
  });
});
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы