有没有办法在右侧进行此操作,或者建议我如何使输入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/

10-12 16:19