Блог

Я использую Readmore.js плагин. Я искал различные решения для моей следующей проблемы, но ни одно из них не казалось идеальным.

Я хочу добавить функцию, которая сворачивает ранее развернутую статью — если таковая имеется, при нажатии readmore .

Спасибо Джошу, мне удается помечать переменную isOpen как true или false когда статья расширяется / сворачивается. Теперь я пытаюсь выяснить, как свернуть статью при расширении новой.

 <script>
$('#info').readmore({

moreLink: '<a href="#">More examples and options</a>',
maxHeight: 390,
afterToggle: function(trigger, element, expanded) {
if(! expanded) { // The "Close" link was clicked
$('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
}
}
});

$('article').readmore({maxHeight: 240});


var isOpen = true;
$('article').readmore({
afterToggle: function(trigger, element, expanded) {

if (expanded) {
  isOpen = true;
}
if(! expanded) { 
  isOpen = false;    }
  }
});

$('article').readmore({
beforeToggle: function(trigger, element, expanded) {

if (isOpen) {

}
  }
}); 
    </script>
 

Уже спасибо…

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

Первая часть Я просто взял это прямо с сайта и изменил его. Устанавливает флаги после переключения.

 var isOpen = true;

$('article').readmore({
afterToggle: function(trigger, element, expanded) {

if (expanded) {
  isOpen = true;
}
if(! expanded) { 
  isOpen = false;    }
  }
});
 

Далее вы просто используете beforeToggle, чтобы проверить, активирован ли флаг, и если да, закройте статью.

Честно говоря, тем более, что у вас нет большого опыта, вы должны просто научиться делать то, что делает этот плагин самостоятельно. Это поможет вам учиться намного быстрее.

Все, что он делает, это устанавливает для стиля блока div значение display: none; Буквально, это просто заставляет его исчезнуть, оставаясь при этом существующим. Вы можете добиться того же эффекта таким образом:

  document.getElementById('article1').style.display = "none";
 

Если вы хотите, чтобы блок div с идентификатором article1 снова появился, предположительно, нажмите onClick, а затем просто сделайте так, чтобы он появился:

  document.getElementById('article1').style.display = "block";
 

Возможно, было бы даже лучше сделать плавный переход с помощью CSS. Затем просто используйте JavaScript для изменения стиля или псевдоклассов в CSS (например: hover)