0
自分自身と入力フィールドの外側をクリックするたびにドロップダウンを終了します。しかし、クリックすると、フィールドが即座に開閉します。ここにコードがあります。非常にかさばりますが、理解することは可能です。 ドロップダウンがすぐに閉じる
var slitems = document.getElementsByClassName('slit');
\t \t ddown = document.getElementsByClassName('ddown');
\t function valueChange(n){
\t \t var slitemsin = document.getElementsByClassName('s'+(n+1));
\t \t for(var j=0;j<slitems.length;j++){
\t \t \t slitemsin[j].addEventListener('click', function(){
\t \t \t \t ddown[n].value = this.textContent || this.innerText;
\t \t \t \t document.getElementById('sl'+(n+1)).classList.remove('slactive');
\t \t \t });}}
\t function ddownEvent(n){
\t \t return function(){
\t \t \t document.getElementById('sl'+(n+1)).classList.add('slactive');
\t \t \t ddown[n].classList.remove('req');
\t \t \t ddown[n].classList.add('filled');
\t \t \t valueChange(n);
\t \t \t };
\t \t };
\t function ex(e,n){
\t \t return function(){
\t \t \t if(e.target != ddown[n] && e.target.id != 'sl'+(n+1)){
\t \t \t \t if(ddown[n].value === 'day' || ddown[n].value === 'month' || ddown[n].value === 'capacity' || ddown[n].value === 'year' || ddown[n].value === "hh" || ddown[n].value === 'mm') ddown[n].classList.remove('filled');
\t \t \t \t document.getElementById('sl'+(n+1)).classList.remove('slactive');
\t \t \t }
\t \t };
\t }
\t for(var n=0; n<ddown.length; n++) {
\t \t ddown[n].addEventListener('mousedown',ddownEvent(n));
\t \t ddown[n].addEventListener('mouseup', ex(event,n));
\t \t }html {
background: black;
}
body {
\t background: black;
\t -webkit-font-smoothing: antialiased;
\t -moz-osx-font-smoothing: grayscale;
\t height: 100vh;
}
.frow {
\t width: 1500px;
\t height: 40px;
\t border-left: 6px white solid;
\t margin-top: 25px;
}
.frow:first-child{
\t margin-top:60px;
}
.ptext {
\t font-family: "Helvetica";
\t font-size: 22px;
\t background: none;
\t border: none;
\t border-bottom: 3px #525252 solid;
\t color: #525252;
\t transition: all .1s;
\t margin-left: 30px;
\t display: inline-block;
\t resize:none;
\t padding: 0;
}
.filled {
\t color: white;
\t border-bottom: 3px white solid;
}
.ptext:focus{
\t color: white;
\t border-bottom: 3px white solid;
}
.ptext:first-child {
\t margin-left: 20px;
}
.ddown {
\t -webkit-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
}
.sl{
\t position: absolute;
\t height: 0px;
\t box-shadow: 0px 0px 0px 0px black;
\t overflow: auto;
\t cursor: pointer;
\t visibility: hidden;
\t transition: all .15s;
\t background-color: white;
}
.sl::-webkit-scrollbar{
\t display:none;
}
.slit {
\t width: 100%;
\t height: 40px;
\t line-height: 40px;
\t text-align: center;
\t font-family: "Helvetica";
\t font-size: 22px;
\t color: #292929;
\t -webkit-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
}
.slit:hover{
\t background-color: #525252;
\t color: white;
}
.slactive{
\t height: 220px;
\t visibility: visible;
\t box-shadow: 0px 0px 34px 0px black;
} <div class="frow">
<input name="Day" spellcheck="false" class="ptext ptextc ddown" type="text" value="day" minlength="1" maxlength="2" style="height:30px;width:50px;" readonly/>
<ul class="sl" id="sl1" style="width:50px;left:15px;top:90px;">
<li class="slit s1">1</li>
<li class="slit s1">2</li>
<li class="slit s1">3</li>
<li class="slit s1">4</li>
<li class="slit s1">5</li>
<li class="slit s1">6</li>
<li class="slit s1">7</li>
<li class="slit s1">8</li>
<li class="slit s1">9</li>
<li class="slit s1">10</li>
<li class="slit s1">11</li>
<li class="slit s1">12</li>
<li class="slit s1">13</li>
<li class="slit s1">14</li>
<li class="slit s1">15</li>
<li class="slit s1">16</li>
<li class="slit s1">17</li>
<li class="slit s1">18</li>
<li class="slit s1">19</li>
<li class="slit s1">20</li>
<li class="slit s1">21</li>
<li class="slit s1">22</li>
<li class="slit s1">23</li>
<li class="slit s1">24</li>
<li class="slit s1">25</li>
<li class="slit s1">26</li>
<li class="slit s1">27</li>
<li class="slit s1">28</li>
<li class="slit s1">29</li>
<li class="slit s1">30</li>
<li class="slit s1">31</li>
</ul>
ddown[n]
'sl'+(n+1)ドロップダウンIDがあります。
ポストyout html＆cssコード – prasanth
もしあなたが組み込みのコードランナーを使うことができれば、それも助けになります。 – Sgnl
ドロップダウンで、htmlの '