我有一个嵌套的div，其中包含“其他信息”。
当某人单击div时，它将打开“其他信息” div。
我使用.stopPropagation()来防止当用户单击“其他信息”中的文本时将其关闭，但是如果他们单击边框或其他内容，则会发生折叠，并且信息消失。
我发现this SO post-似乎很接近我想要的东西，但是我不知道如何使它完全满足我的需要。
Here is a codepen是我要完成的工作。
$('#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>
这是“有效的”，但它只能避免在底部发出咔嗒声-我如何才能使其也避免在侧面发出咔嗒声？
边注：似乎在底部大约有一个很小的行，如果仍然单击它，它会崩溃。
答案 0 :(得分：1)
填充空格使其可单击。
您不需要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>
答案 1 :(得分：0)
我会调整几件事-在可点击的内容之外获得额外的div，然后将填充物放在子容器上，并将样式放在容器上。
问题确实是您的容器填充在可折叠div周围是可点击的。
.container--nopad {
padding: 0;
}
#collapseDiv, #additionalDiv {
padding: 20px;
}
<div class="container container--nopad alert alert-warning">
<div id="collapseDiv" 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>
答案 2 :(得分：0)
容器div的填充是引起该动作的原因。删除填充，而是将其添加到两个内部元素中。
$('#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;
padding-left: 0;
padding-right: 0;
}
#collapseDiv .triggerDiv,
#collapseDiv #additionalDiv {
padding-left: 1.25rem;
padding-right: 1.25rem;
}<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">
<div class="triggerDiv">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>