僅使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>