左と右のテキストボックスでカスタムドロップダウン

Question

ドロップダウンを見つけましたが、どこでもこのようなドロップダウンを見つけることができません。誰でもこのようなドロップダウンを作成するのを手伝ってください。

Answer 1

これは間違いなく、カスタムコードです。それが動作するかもしれない方法のちょうどプロトタイプ：リーでこの機能を使用することにより

$(function() { 
 
    $(".dropdown-trigger").click(function (e) { 
 
    e.preventDefault(); 
 
    $(this).closest(".dropdown-container").toggleClass("open"); 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    line-height: 1; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background-color: #fff; 
 
    padding: 15px; 
 
} 
 
.dropdown-container { 
 
    background-color: #f5f5f5; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    position: relative; 
 
} 
 
.dropdown-container input { 
 
    padding: 5px; 
 
    width: 100px; 
 
} 
 
.dropdown-container a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    background-color: #fff; 
 
    vertical-align: middle; 
 
    border: 1px solid #ddd; 
 
    padding: 4px 5px; 
 
    color: #333; 
 
} 
 
.dropdown-menu { 
 
    position: absolute; 
 
    left: 15px; 
 
    right: 15px; 
 
    padding: 5px; 
 
    background-color: #f0f0f0; 
 
    border: 1px solid #e0e0e0; 
 
    border-top: 0; 
 
    margin-top: 5px; 
 
    display: none; 
 
} 
 
.dropdown-menu a { 
 
    display: block; 
 
    text-align: center; 
 
    margin: 5px; 
 
} 
 
.dropdown-container.open .dropdown-menu { 
 
    display: block; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<div class="dropdown-container"> 
 
    <input type="text" /> 
 
    <a href="" class="dropdown-trigger">&#x25BC;</a> 
 
    <input type="text" /> 
 
    <div class="dropdown-menu"> 
 
    <ul> 
 
     <li><a href="">Item 1</a></li> 
 
     <li><a href="">Item 2</a></li> 
 
     <li><a href="">Item 3</a></li> 
 
     <li><a href="">Item 4</a></li> 
 
     <li><a href="">Item 5</a></li> 
 
     <li><a href="">Item 6</a></li> 
 
     <li><a href="">Item 7</a></li> 
 
     <li><a href="">Item 8</a></li> 
 
     <li><a href="">Item 9</a></li> 
 
     <li><a href="">Item 10</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

onclickの私は、このドロップダウン

function setSizess(param){ 
var id = $(param).attr('id'); 
var width = $(param).attr('rel'); 
var height = $(param).attr('ref'); 
if(height=="custom"){ 
    $(".banner-sizes").slideUp('fast'); 
    var width = $('#banner_'+id+'_height').val(height); 
    var height = $('#banner_'+id+'_width').val(height); 
    if(width!=null || height!=null){ 
     $('#banner_'+id+'_height').val(''); 
     $('#banner_'+id+'_width').val(''); 
    } 
    $('#banner_'+id+'_width').focus(); 
}else{ 
    $('#banner_'+id+'_height').val(height); 
    $('#banner_'+id+'_width').val(width); 
} 

function enableClick(param){ 
var id = $(param).attr('id'); 
var abc = id.substring(id.indexOf('_') +1); 
$('#'+id).click(function(){ 
    $('.close_banner_'+abc).show(); 
}); 

$(".showsizebox").live('click', function(){ 
$(".banner-sizes").on('mouseleave',function(){ 
    $(".banner-sizes").slideUp('fast'); 
});