javascript - 该网站无法使用 loadmore 按钮

我有 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 中。

最佳答案