Slide Toogle присваивает значение inline-block

223
11 января 2018, 20:11

Есть вот такой вот блок:

$(document).ready(function() { 
  // Configure/customize these variables. 
  var showChar = 200; // How many characters are shown by default 
  var ellipsestext = "..."; 
  var moretext = "Подробнее"; 
  var lesstext = "Свернуть"; 
 
 
  $('.more').each(function() { 
    var content = $(this).html(); 
 
    if (content.length > showChar) { 
 
      var c = content.substr(0, showChar); 
      var h = content.substr(showChar, content.length - showChar); 
 
      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span><a href="" class="morelink">' + moretext + '</a></span>'; 
 
      $(this).html(html); 
    } 
 
  }); 
 
  $(".morelink").click(function() { 
    if ($(this).hasClass("less")) { 
      $(this).removeClass("less"); 
      $(this).html(moretext); 
    } else { 
      $(this).addClass("less"); 
      $(this).html(lesstext); 
    } 
    $(this).parent().prev().slideToggle(200); 
    $(this).prev().slideToggle(200); 
    return false; 
  }); 
 
});
.morecontent span { 
  display: none; 
} 
 
.morelink { 
  display: block; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="more"> 
  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer 
  tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa. 
</div>

При разворачивании блоку .morecontent span присваивается свойство inline-block, а нужно просто inline. Как быть?

Answer 1

Воспользоваться коллбэком и впилить блоку display: inline.

$(document).ready(function() { 
  // Configure/customize these variables. 
  var showChar = 200; // How many characters are shown by default 
  var ellipsestext = "..."; 
  var moretext = "Подробнее"; 
  var lesstext = "Свернуть"; 
 
 
  $('.more').each(function() { 
    var content = $(this).html(); 
 
    if (content.length > showChar) { 
 
      var c = content.substr(0, showChar); 
      var h = content.substr(showChar, content.length - showChar); 
 
      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span><a href="" class="morelink">' + moretext + '</a></span>'; 
 
      $(this).html(html); 
    } 
 
  }); 
 
  $(".morelink").click(function() { 
    if ($(this).hasClass("less")) { 
      $(this).removeClass("less"); 
      $(this).html(moretext); 
    } else { 
      $(this).addClass("less"); 
      $(this).html(lesstext); 
    } 
    $(this).parent().prev().slideToggle(200); 
    $(this).prev().slideToggle(200, function () { 
      if ( $(this).is(':visible') ) $(this).css('display', 'inline'); 
    }); 
    return false; 
  }); 
 
});
.morecontent span { 
  display: none; 
} 
 
.morelink { 
  display: block; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="more"> 
  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer 
  tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa. 
</div>

READ ALSO
Выбрать рандомный цвет из массива для элемента

Выбрать рандомный цвет из массива для элемента

Есть 3 элемента: квадрат, круг и треугольник

256
Фон для параллакса

Фон для параллакса

Всем привет!

207
Не работает кнопка вверх

Не работает кнопка вверх

Помогите разобраться, есть сайт, на нем не работает кнопка вверх

183
Качество картинки

Качество картинки

Есть картинка 320x200Я размещаю ее в блоке шириной 260 пикселей, высота картинки уменьшается пропорционально до 162,5, но экран не может отображать...

239