我的LoadMore按钮具有以下代码:https://codepen.io/anon/pen/ZqzPaL
但是,当我将其放入网站时,它不再起作用。仅出现更多/更少按钮,但不再显示文本。
我需要说的是,我将该脚本放入了.js文件和HTML->
以下是使用ID和类的HTML代码。
$(document).ready(function () {
size_p = $("#myList p").size();
x=3;
$('#myList p:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+3 <= size_p) ? x+3 : size_p;
$('#myList p:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-3<0) ? 3 : x-3;
$('#myList p').not(':lt('+x+')').hide();
});
});
#myList p{
display:none;
}
#loadMore {
color:green;
cursor:pointer;
padding: 5px 15px;
cursor: pointer;
background: #e8e8e8;
width: 75px;
margin: 5px;
position: relative;
border-radius: 15px;
}
#loadMore:hover
#showLessa:hover
#showLess:hover
{
color:black;
}
#showLess {
color:red;
cursor:pointer;
padding: 5px 15px;
cursor: pointer;
background: #e8e8e8;
position: relative;
border-radius: 15px;
width: 75px;
margin: 5px;
}
<div id="myList">
<p>
Some text here.
</p>
<p>
Second paragraph here.
</p>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
我需要提到的是,段落也在其他类的其他div中。