Есть вот такой вот блок:
$(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 + ' </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
. Как быть?
Воспользоваться коллбэком и впилить блоку 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 + ' </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>
Какие существуют виды рекламных бордов и как выбрать подходящий?
Аренда удаленного сервера: цены, провайдеры и условия. Руководство для начинающих
Есть картинка 320x200Я размещаю ее в блоке шириной 260 пикселей, высота картинки уменьшается пропорционально до 162,5, но экран не может отображать...