代码之家 › 专栏 › 技术社区 › Hanny

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

css html jquery javascript

Hanny · 技术社区 · 6 年前

我有一个包含“附加信息”的嵌套div。

我用过 .stopPropagation() 为了防止在用户单击“附加信息”中的文本时关闭它,但如果用户单击边框或其他内容,则会发生折叠并使信息消失。

this SO post -这似乎接近我想要的,但我不知道如何使它工作,我到底需要什么。

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

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

3 回复 | 直到 6 年前

onyx 6 年前

这个衬垫空间让它可以点击。

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>

dmgig 6 年前

真正的问题是您的容器填充可以在collapsable 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>

密码笔: https://codepen.io/dmgig/pen/EpzGLG

Spencer 6 年前

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