javascript - 仅使 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

填充 空间使其可点击。

您不需要 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>