Question

我有以下代码，我创建的是为了突出我遇到的问题。

<html>
<head>
<style>
.p {
   position:relative;
   border:solid;
   border-width:1px;
   border-color:blue;
   width:300px;
   margin-bottom:10px;
   min-height:100px;
}

.c {
   height:100px;
   position:relative;
   border:solid;
   border-width:1px;
   width:300px;
   margin-bottom:10px;
}

.content {
   display:none;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
   for(var count=0; count < 50; count++) 
      $("#id1").append("<div class=\"p\"><button class=\"b\">click</button><div class=\"content\"></div></div>");
});

$(document).on("click",".b",function(event) {

   // empty all contents
   $(".p >.content").empty().hide();

   // generage a random number between 10 and 60
   var random=Math.floor(Math.random() * (60 - 10 + 1)) + 10;

   for(var count=0; count < random; count++)
      $(this).parent("div").children(".content").append("<div class=\"c\"></div>");

   $(this).parent("div").children(".content").show();

});
</script>

</head>
<body>
<div id="id1"> </div>
</body>
</html>

单击按钮时，会将内容添加到所选内容。它还会清空任何其他div的内容，以便显示的内容对所选内容是唯一的。问题是，如果我在删除内容时单击以在已选择的div下添加内容，则会自动向上滚动（因为折叠div）并丢失用户刚刚选择的位置。我想要发生的是内容像平常一样隐藏，但不能移动滚动位置。有没有人有任何想法我怎么能做到这一点？

停止自动滚动内容删除

0 个答案: