我有一个使 div 可见的按钮。当我点击 div 之外的任何地方时,会有一个监听器应该再次隐藏它,但它没有被触发。我做错了什么,或者有更好的方法来做到这一点?
$("#buttonNewIssue").on("click", function(e) {
console.log("button new issue click");
if ($("#newIssueMenu").hasClass("newIssueMenuHidden")) {
$("#newIssueMenu").removeClass("newIssueMenuHidden");
$("#newIssueMenu").addClass("newIssueMenuShown");
$("#newIssueMenu").css("left", $(this).position().left);
$("#newIssueMenu").css("top", $(this).outerHeight() + $(this).position().top);
$("#newIssue").focus();
} else {
$("#newIssueMenu").removeClass("newIssueMenuShown");
$("#newIssueMenu").addClass("newIssueMenuHidden");
}
});
$("#newIssueMenu").on("blur", function(e) {
console.log("newIssueMenu blur");
$(this).removeClass("newIssueMenuShown");
$(this).addClass("newIssueMenuHidden");
});
.newIssueMenuShown {
z-index: 1;
position: absolute;
left: 0;
top: 0;
display: block;
visibility: visible;
transition-property: display, visibility;
transition-duration: 0.4s;
}
.newIssueMenuHidden {
display: none;
visibility: hidden;
transition: all 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="buttonNewIssue" type='button' data-toggle='popover' data-content='Create New Issue'>New Issue</button>
<div id="newIssueMenu" class="newIssueMenuHidden">
<form><input id="newIssue" type="text" placeholder="Issue Name"></form>
</div>
代码笔: https: //codepen.io/jasonws/pen/VwadjBY
慕沐林林
相关分类