Question

我正在为我的网页做评论系统。该网站显示了数据库中的一组元素，每个人都可以发表评论：

元素1（$ element_id = 1） - ＆gt;阅读评论......

元素2（$ element_id = 2） - ＆gt;阅读评论......

元素3（$ element_id = 3） - ＆gt;阅读评论......

如果有人想要阅读一个元素的评论，可以点击＆＃34;阅读评论...＆＃34;，然后打开一个新的div：

<div class="comments_more" id="comments_more"> Read comments...
<div class="comments_div" id="comments_div" > 
<?php include/comments.php ?>
<?php echo $element_id; ?>
</div> </div>

打开div的jquery代码适用于每个元素：

  $(document).ready(function(){
    $( '.comments_more' ).click(function() {
    $(this).find( '#comments_div' ).show('slide');
    });
    })

现在，当用户在其外部点击时，我找到了一个很好的jquery来关闭div：

$(document).mouseup(function (e){
var container = $("#comments_div");
if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{        container.hide();    }
});

问题是仅适用于第一个＆＃34;阅读评论...＆＃34; （第一个要素）。

Answer 1

您不能在一个页面上拥有多个ID，请尝试使用类作为选择器，而不是：

$(".comments_div")

Answer 2

我在这里猜测重复的HTML看起来像什么，但尝试这样的事情：

$(document).ready(function() {
  $('.comments_more').click(function() {
    $(this).find('.comments_div').show('slide');
  });
})

$(document).mouseup(function(e) {
  var container = $(".comments_div");
  if (!container.is(e.target) && container.has(e.target).length === 0)
  {
    container.hide();
  }
});

.comments_div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="comments_more"> Read comments...
  <div class="comments_div">
    Comments 1
  </div>
</div>
<div class="comments_more"> Read comments...
  <div class="comments_div">
    Comments 2
  </div>
</div>
<div class="comments_more"> Read comments...
  <div class="comments_div">
    Comments 3
  </div>
</div>

使用jquery打开和关闭div

2 个答案: