Всем привет.
Захотел вникнуть в JS параллельно делая небольшой проект.
В общем надо сделать так чтобы при нажатии на #input появлялся div #downmenu, потом при клике в любое место этот div исчезал но при клике на сам div пока что ничего не происходило. В общем я сделал появление div и исчезновение но как заставить это работать постоянно не могу понять потому что .one запускается только один раз. Может кто нибудь подскажет более красивое решение.
Вот код.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link type="text/css" rel="stylesheet" href="reset.css"></link>
<style>
#field {
margin-left: 20px;
margin-top: 20px;
width: 200px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- <script type="text/javascript" src="java-test.js"></script> -->
<script type="text/javascript" src="java.js"></script>
</head>
<body>
<form id="mainform">
<input id="field" type="text" placeholder="aaaa"></input>
</blockquote>
</form>
</body>
</html>
$(document).ready(function ($) {
// При нажатии на input появляется div 'downmenu'
$('#field').one('keypress', function(event) {
$('#mainform').after($('<div/>', {
id: 'downmenu',
}));
$('#downmenu')
.css({
border: '1px solid black',
height: '200px',
width: $('#field').width() + 2,
marginLeft: '20px',
backgroundColor: '#2F58F3',
});
});
// При нажатии на любое место кроме div, div ищечзает.
$(function($) {
$(document).mouseup(function(event) {
var div = $(`#downmenu`);
if (!div.is(event.target) && div.has(event.target).length === 0) {
div.remove();
};
});
});
});
Спасибо.