Tengo una function que al pinchar un botón me despliega un div
con alguna información y uso e.stopPropagation
por que creo otra function que al dar click en cualquier parte del html
me esconda el div
de nuevo la cosa es que el click se propaga al div
que yo quiero que se muestre y no quiero que lo haga por que ese div también necesito darle click para otras funciones e aquí mi código para que entiendan mejor
$('.likes .inbox').click(function(e) {
e.stopPropagation();
$(".inbox-desplegate").stop().slideToggle();
$('#send-inbox-input').focus();
})
$("html").click(function() {
$(".inbox-desplegate").hide();
})
.inbox-desplegate-content {
min-height: 150px;
border: solid 1px lightgrey;
}
.inbox-desplegate {
max-width: 300px;
position: absolute;
width: 100%;
min-height: 200px;
background: white;
top: 90px;
left: 0;
border-radius: 10px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.176) !important;
z-index: 3;
border: solid 1px lightgrey;
display: none;
}
.inbox-desplegate-footer {
position: relative;
bottom: 0;
}
.likes {}
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!--this div contain the listener on click-->
<div class="col-4 text-center likes">
<a href="#" class="inbox"> <big><i class="fa fa-inbox"></i></big> Inbox </a>
</div>
<!--this div is the one hidden-->
<div class="inbox-desplegate" id="inbox-desplegate">
<div class="card-header p-3">
<span class="header-title">Send message</span>
<button
type="button" class="close mb-2"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</div>
<div class="card-body inbox-desplegate-content" >
</div>
<div class="card-footer inbox-desplegate-footer">
<form class="form-group">
<div class="input-group mb-3">
<input
type="text" class="form-control"
placeholder="type message"
aria-label="Recipient's username"
aria-describedby="button-addon2" id="send-inbox-input">
<div class="input-group-append">
<button
class="btn btn-primary"
type="button"
id="button-addon2"><i class="fa fa-location-arrow"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
como vieron al dar click en inbox se despliega bien y al dar click en cualquier parte de el html menos en inbox se oculta el div
, yo quiero decirle mediante e código que el click de la función html no se propague al div
que se despliega cual sería la solución? gracias de ante manos amigos!