【发布时间】：2017-03-12 17:30:33
【问题描述】：
我是角度材料的新手。所以我试图用有角度的材料来做造型。我能够显示输入字段。由于它没有值，因此字段名称将看起来像占位符，如果用户单击输入字段，则字段名称将设置为标题并能够输入值。
我正在尝试显示与材料输入字段相同的下拉列表。最初，如果没有选择任何值，字段名称将看起来像占位符，右上角有箭头。如果用户单击下拉字段，则需要将字段名称设置为标题并打开下拉列表。
我试过了，但我在下拉菜单中遇到了一些问题。
<form name="pForm" role="form">
<!--Personal Info Col-->
<div class="row form-row1">
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.fname.$dirty || pForm.$submitted) && pForm.fname.$invalid }" >
<input class="form-control" type="text" name="aname" ng-model="model.aname" required/>
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name" for="aname"> Name of Account *</label>
</div>
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.lname.$dirty || pForm.$submitted) && pForm.lname.$invalid }" class="help-block">
<input class="form-control" type="text" name="dname" ng-model="model.dname" required/>
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name">Display Name *</label>
</div>
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.dname.$dirty || pForm.$submitted) && pForm.dname.$invalid}" >
<input class="form-control" type="text" name="acode" ng-model="model.acode" ng-required="true" ng-pattern="/^[A-Za-z0-9_.]*$/" ng-minlength = "1"/>
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name" for="acode">Account Code *
</label>
</div>
</div>
<div class="row form-row1">
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.caddress.$dirty || pForm.$submitted) && pForm.caddress.$invalid }" class="help-block">
<!--<select class="form-control select2" name="segment" ng-model="model.segment" ng-options="item for item in segments" style="width: 100%;" required>
<option value class disabled selected>Select</option>
</select>-->
<div class="mad-select" class="group" required>
<ul>
<li data-value="1">Option 1</li>
<li data-value="2 foo">Option 2</li>
<li data-value="3 bar">Option 3</li>
<li data-value="4">Option 4</li>
<li data-value="5">Option long desc 5</li>
<li data-value="6">Option 6</li>
<li data-value="7">Option 7</li>
<li data-value="8">Option 8</li>
</ul>
<input type="hidden" name="myOptions" value="3 bar">
</div>
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name">Segment</label>
/* Script to display dropdown */
<script>
var madSelectHover = 0;
$(".mad-select").each(function() {
var $input = $(this).find("input"),
$ul = $(this).find("> ul"),
$ulDrop = $ul.clone().addClass("mad-select-drop");
$(this)
.append('<i class="material-icons">arrow_drop_down</i>', $ulDrop)
.on({
hover : function() { madSelectHover ^= 1; },
click : function() { $ulDrop.toggleClass("show"); }
});
// PRESELECT
$ul.add($ulDrop).find("li[data-value='"+ $input.val() +"']").addClass("selected");
// MAKE SELECTED
$ulDrop.on("click", "li", function(evt) {
evt.stopPropagation();
$input.val($(this).data("value")); // Update hidden input value
$ul.find("li").eq($(this).index()).add(this).addClass("selected")
.siblings("li").removeClass("selected");
});
// UPDATE LIST SCROLL POSITION
$ul.on("click", function() {
var liTop = $ulDrop.find("li.selected").position().top;
$ulDrop.scrollTop(liTop + $ulDrop[0].scrollTop);
});
});
// CLOSE ALL OPNED
$(document).on("mouseup", function(){
if(!madSelectHover) $(".mad-select-drop").removeClass("show");
});
</script>
</div>
</div>
</div>
</form>
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border-bottom: 1px solid #ccc;
/* border-radius: 4px; */
border-top: none;
border-left: none;
border-right: none;
/* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); */
/* box-shadow: inset 0 1px 1px rgba(0,0,0,.075); */
/* -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; */
/*-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
}
/* style for input box */
.group {
position:relative;
margin-bottom:45px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
}
input:focus { outline:none; }
label {
/*color:#999;*/
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#333;
font-weight: 600;
}
.highlight {
position:absolute;
height:60%;
/*width:100px;*/
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
.field-name {
left: 15px;
top: 5px;
}
/* ./ style for input box - END ./ */
/* style for select dropdown box */
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0, 0.2);
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0,0,0, 0.3);
}
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}
body{
font: 16px/24px Roboto, sans-serif;
background: #fafafa;
}
/*
MAD-SELECT by Roko CB
*/
.mad-select .material-icons{
vertical-align: middle;
}
.mad-select{
position:relative;
display:inline-block;
vertical-align:middle;
border-bottom: 1px solid rgba(0,0,0,0.12);
padding-right: 8px;
}
.mad-select ul {
list-style: none;
display:inline-block;
margin:0; padding:0;
}
.mad-select li{
vertical-align: middle;
white-space: nowrap;
height:24px;
line-height:24px;
display: none;
padding: 8px 16px;
margin:0;
box-sizing: initial;
}
.mad-select > ul:first-of-type{
max-width:120px; /* COMMENT FOR AUTO WIDTH */
}
.mad-select > ul:first-of-type li.selected{
display: inline-block;
height: 24px;
max-width: calc(100% - 24px);
overflow: hidden;
text-overflow: ellipsis;
}
.mad-select i.material-icons{
opacity: 0.5;
margin:0;
padding:0;
}
/*jQ*/
.mad-select ul.mad-select-drop{
position: absolute;
z-index: 9999;
visibility: hidden; opacity:0;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
top: 0;
left: 0;
transition: 0.24s;
max-height: 0;
overflow: hidden;
overflow-y: auto;
}
.mad-select ul.mad-select-drop.show{
visibility: visible; opacity: 1;
max-height: 160px; /* COMMENT IF YOU DON?T NEED MAX HEIGHT */
}
.mad-select ul.mad-select-drop li{
display: block;
transition: background 0.24s;
cursor: pointer;
}
.mad-select ul.mad-select-drop li.selected{
background: rgba(0,0,0,0.07);
}
.mad-select ul.mad-select-drop li:hover{
background: rgba(0,0,0,0.04);
}
/* ./ style for select dropdown box - END ./ */
【问题讨论】：
标签： jquery css angularjs drop-down-menu