[英]Make entire DIV clickable except the dropdown
我正在嘗試使整個DIV可點擊並使其正常運行。 但是,我想對下拉菜單做一個例外。 點擊此下拉button
不應打開next.html
。 當前,它打開下拉菜單,但也很快打開next.html
。 我該怎么辦?
演示:https://jsfiddle.net/40wntLyo/
<div class="project__body" onclick="location.href='next.html';">
<div class="row">
<div class="col-10">
<h1>Title of the DIV</h1>
</div>
<div class="col-2 text-right">
<div class="dropdown">
<button type="button" class="dropdown-btn dropdown-toggle" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<p>There's more content here in this div. There's more content here in this div. There's more content here in this div. </p>
</div>
</div>
將JS函數添加到下拉列表的父div中,該div在單擊時被調用:
<div class="col-2 text-right" onclick="processClick()">
// Dropdown content here
</div>
<script>
function processClick(e) { e.stopPropagation() }
</script>
首先,您必須刪除內聯javascript事件並嘗試以下示例:
jQuery的:
$('.dropdown').click(function(event){
event.stopPropagation();
$('.dropdown-menu').toggle();
})
$('.project__body').click(function(){
window.location.href="next.html"
})
HTML:
<div class="project__body">
<div class="row">
<div class="col-10">
<h1>Title of the DIV!</h1>
</div>
<div class="col-2 text-right">
<div class="dropdown">
<button type="button" class="dropdown-btn dropdown-toggle" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<p>There's more content here in this div. There's more content here in this div. There's more content here in this div. </p>
</div>
</div>
以下代碼段應該有效
將click事件移到父級下拉容器中,這還將防止在單擊下拉項時重定向
$('.dropdown').click(function(event) { $(this).children(".dropdown-menu").toggle() event.stopPropagation(); })
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="project__body" onclick="location.href='next.html';"> <div class="row"> <div class="col-10"> <h1>Title of the DIV!</h1> </div> <div class="col-2 text-right"> <div class="dropdown"> <button type="button" class="dropdown-btn dropdown-toggle" data-toggle="dropdown">Menu</button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Edit</a> <a class="dropdown-item" href="#">Delete</a> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <p>There's more content here in this div. There's more content here in this div. There's more content here in this div. </p> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.