如何在加载另一个页面时自动关闭 DIV答案

【问题标题】：How to automatically close DIV when another page is loaded如何在加载另一个页面时自动关闭 DIV
【发布时间】：2019-05-20 06:12:01
【问题描述】：

通过使用下面的 css，我可以在单击按钮时使 div 展开。此 DIV 固定在每一页的顶部。但即使我移动到另一页，它也总是以展开的形式出现。加载其他页面时如何自动关闭？

#expend {
  display:none;  
}

#expend + .smalldesc {
  max-height:52px;
  overflow:hidden;
  transition:all .3s ease;
}

#expend:checked + .smalldesc {
  max-height:250px;  
}

label {
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}

label:hover {
  text-decoration:none;  
}

<div class="service-1 click1">
<div class="row">
  <input type="checkbox" id="expend" />
  <div class="medium-12 small-12 columns smalldesc">
  <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <label for="expend">Read More</label>
</div>
</div>

【问题讨论】：

在加载其他页面时将复选框设置为checked=false。
@Smollet777 如何设置“加载其他页面时”的大小写？
不知道你是怎么换页的。
@Smollet777 我正在使用 Cargocollective。因此，当通过单击菜单或缩略图加载新页面时，URL 会扩展为“www.lorem.com/ipsum”。抱歉……我对这种 CSS 和 JQuery 很差。
选中<input type="checkbox" id="expend" />（隐藏）时，div 会展开。去掉#expend { display:none; }就可以看到了

标签： html css expand

【解决方案1】：

如果您在每个页面上添加它，它会将复选框设置为未选中：

<script type="text/javascript">
    $(document).ready(function() {
        $('#expend').prop('checked', false);
    });
</script>

【讨论】：

当我使用 Cargocollective 时，我无法控制每个页面的 HTML。所以我在body HTML控件上添加了你给我的脚本，但它不起作用....我认为是因为当我移动到另一个页面时它不会刷新以前的设置。
如果您在单击“阅读更多”后在控制台中对其进行测试，它应该可以工作。使用您共享的代码时，它对我有用。
阅读 CargoCollective 知识库后，它说您必须注册“站点升级”（付费帐户）才能添加包含脚本的“自定义 HTML”。我还了解到他们使用 jQuery。如果您确实有付费版本，我已经更新了我的答案以准确显示要添加的内容。