在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置



我想知道是否可以将装备图像添加到HTML5中,在HTML5中单击时,类似于移动应用程序,会显示用户可以选择的选项列表。只使用HTML5、CSS和JavaScript就可以做到这一点吗?

回答问题:是。这是可能的。

您可以通过使用一些基本的JavaScript操作CSS来实现这一点
例如:

<html>
    <body>
        <img id="options-cog" src="https://cdn3.iconfinder.com/data/icons/token/128/Gear.png" onclick='toggleOptions()'>
        <div id='options-wrapper' style='display:none'> 
            -- A FORM ELEMENT WITH OPTIONS -- 
        </div>
        <script>
            function toggleOptions(){
                var elem = document.getElementById('options-wrapper');
                if(elem.style.display == 'none'){
                    elem.style.display = "block";
                }else{
                    elem.style.display = "none";
                }
            }
        </script>
    </body>
</html>

请注意,使用jQuery动画函数会更容易、更好看。

相关内容

最新更新