javascript - 仅使 div 的折叠部分可点击 - 展开部分应保持不可点击
问题描述
我有一个包含“附加信息”的嵌套 div。
当一个人单击 div 时,它会打开“附加信息”div。
当人们单击“附加信息”中的文本时,我曾经.stopPropagation()
阻止它关闭,但是如果他们单击边框或其他内容,则会发生崩溃并且信息会消失。
我发现了这个 SO 帖子- 这似乎与我想要的很接近,但我无法弄清楚如何让它完全按照我的需要工作。
这是我要完成的工作的代码笔。
$('#collapsDiv').on('show.bs.collapse', function( event ) {
event.stopPropagation();
console.log('Only happen when outter div is opened');
})
$('#collapseDiv').on('hide.bs.collapse', function( event ) {
event.stopPropagation();
console.log('Only happen when outter div is collapsed');
})
$('#additionalDiv').on('click', function( event ) {
event.stopPropagation();
})
$('#collapseDiv').click(function(e) {
if (e.pageY > $(this).offset().top + $(this).height()) {
// bottom was clicked
console.log('bottom clicked!');
e.stopPropagation();
} else {
// up of the div was clicked
console.log('top clicked');
}
});
#collapseDiv {
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="collapseDiv" class="alert alert-warning" data-toggle="collapse" href="#additionalDiv" role="button" aria-expanded="false" aria-controls="additionalDiv">
This Div shows by default - I used an alert to make it more visually obvious. Only this part should remain clickable. The hidden stuff should not be clickable. A bonus would be having the lower portion not have a pointer!
<div id="additionalDiv" class="collapse">
<div class="other-stuff">
<h2>This stuff should not be clickable</h2>
<p>There may be paragraphs here a user might want to copy/paste!</p>
<p>In a perfect world - even the bottom / sides would not trigger the collapse. This would only be collapsed by clicking the original div area.</p>
</div>
</div>
</div>
</div>
这是“工作”,但它只能避免点击底部 - 我如何让它避免点击侧面?
旁注:底部似乎有一个非常小的行,如果仍然单击它会导致它崩溃。
解决方案
填充空间使其可点击 。
你不需要 javascript 来实现这一点。只需添加另一个仅div
用于切换。
#collapseDiv {
padding: 0;
}
.my-toggle {
cursor: pointer;
padding: 20px;
}
#additionalDiv {
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="collapseDiv" class="alert alert-warning">
<div class="my-toggle" data-toggle="collapse" href="#additionalDiv" role="button" aria-expanded="false" aria-controls="additionalDiv">
This Div shows by default - I used an alert to make it more visually obvious. Only this part should remain clickable. The
hidden stuff should not be clickable. A bonus would be having the lower portion not have a pointer!
</div>
<div id="additionalDiv" class="collapse">
<div class="other-stuff">
<h2>This stuff should not be clickable</h2>
<p>There may be paragraphs here a user might want to copy/paste!</p>
<p>In a perfect world - even the bottom / sides would not trigger the collapse. This would only be collapsed by clicking
the original div area.</p>
</div>
</div>
</div>
</div>
推荐阅读
- shopify - Shopify :强制收集页面属性
- css - 从v4升级到v5 material-ui,css坏了
- api - AADSTS9002326:跨域令牌兑换仅允许用于“单页应用程序”客户端类型
- opencv - 如何记录/导出模型检测到的情绪?
- jenkins - 从groovy中的数组中删除括号
- c# - 使用自定义 Newtonsoft JSON 转换器解析带有重复键的 JSON
- java - 使用 Java API 查询 dynamoDB
- mongoose - Nest JS 结合了 DB 的插件和配置
- typescript - Typescript - 始终以字符串或数字结尾的通用对象类型
- ios - 如何在与默认目标中的数据不同的数据/应用程序(SQLite db,UserDefaults)上运行 Xcode 测试?