仅使div的折叠部分可点击-展开部分应保持不可点击状态

Question

我有一个嵌套的div，其中包含“其他信息”。

当某人单击div时，它将打开“其他信息” div。

我使用.stopPropagation()来防止当用户单击“其他信息”中的文本时将其关闭，但是如果他们单击边框或其他内容，则会发生折叠并且信息消失。

我找到了这则帖子 -似乎与我想要的内容很接近，但我不知道如何使它完全按我的需要工作。

这是我要完成的工作的代码。

 $('#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> 

这是“有效”的方法，但是它只能避免在底部发出咔嗒声，我又如何避免在侧面产生咔嗒声呢？

旁注：似乎在底部大约有一个很小的行，如果仍然单击它会使其崩溃。

Answer 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> 

Answer 2

我会调整几件事-在可点击的内容之外获得额外的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>

codepen： https ：//codepen.io/dmgig/pen/EpzGLG

Answer 3

来自容器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>