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

Question

我有一个包含“附加信息”的嵌套 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>

这是“工作”，但它只能避免点击底部 - 我如何让它避免点击侧面？

旁注：底部似乎有一个非常小的行，如果仍然单击它会导致它崩溃。

Answer 1

padding 空间使其可点击。

您不需要 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，并将填充放在子容器上，并将样式放在容器上。

问题确实在于您的容器填充可在可折叠 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>