1

Приветствую. С горем пополам смог сам наваять такой простенький код открывания и закрывания блока. Но проблема в том, что блоков много на странице и при клике одного реагируют все. Не знаю как надо указывать на определённый блок.

$(document).ready(function(){
  var $size = 80;
  if($('.cont').height() > $size){
    $('.cont').addClass('hide');
    $('<span>', {text: 'Открыть', class: 'open'}).appendTo('.wrap');			
    $(".open").click(function () {
      $('.cont').toggleClass('hide').toggleClass('full');
      var $button = $(this);
      $button.text($button.text() == "Открыть" ? "Закрыть": "Открыть");
    });
  }
});
.wrap {
  width: 350px;
  padding: 10px;
  background: #ccc;
  font-size: 16px;
  margin: 50px;
}

.cont {
  overflow: hidden;
  line-height: 1.25;
  transition: max-height 0.3s ease 0s;
}

.full {
  max-height: 400px;
}

.hide {
  max-height: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="cont">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
</div>

<div class="wrap">
  <div class="cont">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
</div>

Покажите, пожалуйста, как реализовать задачу и ещё если можно привести код в более правильный вид, то хотелось бы, а то не даёт покоя мысль, что всё печально.

2 ответа 2

1

Надо использовать this и в твоей ситуации я полагаю .siblings

Вот как это должно выглядеть

<div class="wrap">
   <div class="open"> Открыть</div>
   <div class="cont hide">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
</div>
<div class="wrap">
   <div class="open"> Открыть</div>
   <div class="cont hide">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
</div>
$(document).on('click', '.open', function(){
  $(this).siblings('.cont').toggleClass('hide');
});
.hide {
  display: none;
}

jsfiddle

1
  • Знал, что нужен this, но не знал как его правильно применить. Спасибо.
    – Aaron
    10 дек 2016 в 22:21
1

Обрабатывая событие click, дальнейшие действия вы производите со всем набором элементов класса .cont, а вам, в данном случае, нужен элемент, рядом с которым было произведено нажатие элемента .open, поэтому ваш код можно переписать таким образом:

$(".open").click(function () {
  var $button = $(this); // Нажатая кнопка
  var $cont = $button.siblings('.cont'); // Элемент .cont рядом с кнопкой
  $cont.toggleClass('hide').toggleClass('full');
  $button.text($button.text() == "Открыть" ? "Закрыть": "Открыть");
});
1
  • Спасибо вам за пояснение. К сожалению оба ответа отменить не смог, поэтому просто проголосовал за ваш вариант.
    – Aaron
    10 дек 2016 в 22:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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