问题描述
我在这里有点困惑。 我有一个包含评论的 div。 然后，当您单击更多评论图标时，它会通过 ajax 调用 php 并将结果附加到 div 然后将其向下滑动。 那部分工作正常。 然后我有一个隐藏图标，当你点击它时，它会折叠显示更多评论的花费的 div。 我遇到的问题是，如果我折叠 div 然后再次单击显示更多评论，则 div 不再展开。
下面是处理更多和隐藏点击的代码。 任何提示将不胜感激..谢谢
$("[id^='show_more_comments_']").on( 'click', function(e) {
var pagenum = $(this).data('newpage');
var photoid = $(this).data('photoid');
var commentsdiv = 'morecomments_' + photoid;
var moredots = 'show_more_comments_' + photoid;
var lessdots = 'hide_more_comments_' + photoid;
$.ajax({
type: "POST",
url: "showmorecomments.php",
data: {page: pagenum, photoid: photoid},
success: function(data){
$("#" + moredots).data('newpage', pagenum + 1);
$("#" + lessdots).show();
$(data).hide().appendTo("#" + commentsdiv).slideDown(500);
}
});
});
$("[id^='hide_more_comments_']").on( 'click', function(e) {
var photoid = $(this).data('photoid');
var commentsdiv = 'morecomments_' + photoid;
var moredots = 'show_more_comments_' + photoid;
var lessdots = 'hide_more_comments_' + photoid;
$("#" + commentsdiv).slideUp(500);
$("#" + lessdots).hide();
$("#" + moredots).data('newpage', 1);
$("#" + moredots).data('photoid', photoid);
});
如果我设置警报以查看数据值，则它们是正确的。 它只是不再扩展评论后我关闭它们并尝试再次打开它们。
谢谢
JT
1楼
Anurag Srivastava
1
已采纳
2019-03-03 07:43:25
想通了，slideUp 隐藏了评论div因此您必须使用回调函数再次显示评论div 。
$("#" + commentsdiv).slideUp(500, function(){
$(this).empty().show()
})
检查此代码片段：
var data = '<div id="content">' data += 'These are the comments to be added to the comment div' data += '<ul>' data += ' <li>Comment 1</li>' data += ' <li>Comment 2</li>' data += ' <li>Comment 3</li>' data += '</ul>' data += '</div>'; $(function() { $("#showBtn").click(function() { $(data).hide().appendTo("#morecomments_1").slideDown(500) }) $("#hideBtn").click(function() { $("#morecomments_1").slideUp(500, function(){ $(this).empty().show() }) }) })
<div id="morecomments_1"></div> <button id="showBtn">Show</button> <button id="hideBtn">Hide</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>