Question

我在这里有点困惑。我有一个包含评论的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

Answer 1

找到答案后，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>

单击“加载”以加载更多数据，然后单击“隐藏”，然后再次单击“加载”不起作用

1 个答案: