我想添加“显示更多”和“显示更少”的功能后,在100字的文章描述:在此页面http://devo.cutwatches.com/en/component/spsimpleportfolio/item/3-powerfull
我用过这个代码,但它不起作用,它给出了未捕获的TypeError:$不是一个函数
<p class="show-read-more">
<?php echo $this->item->description; ?> </p>
和
<script type="text/javascript">
$(document).ready(function(){
var maxLength = 300;
$(".show-read-more").each(function(){
var myStr = $(this).text();
if($.trim(myStr).length > maxLength){
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(' <a href="javascript:void(0);" class="read-
more">read more...</a>');
$(this).append('<span class="more-text">' + removedStr + '</span>');
}
});
$(".read-more").click(function(){
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
});
</script>
<style type="text/css">
.show-read-more .more-text{
display: none;
}
`
我已经用css试过了,但不起作用
我怎么才能修好呢?
发布于 2018-06-03 03:37:10
你的html应该是这样的
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
// Body
<script type="text/javascript">
$(document).ready(function(){
var maxLength = 300;
$(".show-read-more").each(function(){
var myStr = $(this).text();
if($.trim(myStr).length > maxLength){
var newStr = myStr.substring(0, maxLength) ;
var removedStr = myStr.substring(maxLength,
$.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(' <a href="javascript:void(0);" class="read-
more">read more...</a>');
$(this).append('<span class="more-text">' + removedStr + '</span>');
}
});
$(".read-more").click(function(){
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
});
</script>
</body>
</html>
https://stackoverflow.com/questions/50660449
复制相似问题