有没有办法在右侧进行此操作,或者建议我如何使输入txt像选择按钮一样。
演示扩展列表
/* this is use for the apearance of the input txt to have downbbutton*/
<style>
#dropdown{
-moz-appearance: spinner-downbutton;
-webkit-appearance: spinner-downbutton;
}
</style>
<script>
</script>
</head>
<body>
<div id="listContainer">
<div>
<input type="text" id="dropdown" >
</div>
<div id="orgContainer">
<ul id="expList">
<li>
Item A
<ul>
<li>
Item A.1
<ul>
<li>
<span>Kalbo na panot.</span>
</li>
</ul>
</li>
<li>
Item A.2
</li>
<li>
Item A.3
<ul>
<li>
<span>Macho na bading.</span>
</li>
</ul>
</li>
</ul>
</li>
<li>
Item B
</li>
<li>
Item C
<ul>
<li>
Item C.1
</li>
<li>
Item C.2
<ul>
<li>
<span>Buntis na Sungke.</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
这是我的html。
这是我的脚本(script.js)
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button funtionality
$('#expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
$(document).ready( function() {
$("#orgContainer").hide();
$("#dropdown").click(function(){
$("#orgContainer").toggle();
$(this).blur();
});
prepareList()
});
谢谢您考虑我的问题。先感谢您。
最佳答案
伴侣,如果您需要数字值,为什么不直接使用
<input type="number" >
默认情况下,您会获得用于选择值的下拉菜单,
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number
关于javascript - 如何使-moz外观:spinner-down按钮位于最右侧,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31397122/