Semantic UI 之 下拉菜单 dropdown

第一步：创建项目

添加JQuery和Semantic UI包、创建dropdown.html页面：

第二步：dropdown.html页面

    
        
        分段
        
        
        
    
    
        
    

最简单的下拉菜单：不需要JavaScript就可下拉

最简单的下拉菜单：不需要JavaScript就可下拉

    课程
    
    
        语文
        英语
        数学
    

效果：

普通下拉菜单

普通下拉菜单

    课程 
    
        语文
        英语
        数学
    

本菜单以及下面的菜单都需要借助以下JavaScript代码才能显示出来：

    $(".ui.dropdown").dropdown({
        on:'hover' ,//鼠标悬浮显示，默认值是click
        transition:'swing right', //设置动画效果
        allowAdditions:true //允许添加新的菜单项
    });

效果：

可以选择的下拉菜单

可以选择的下拉菜单

    课程
    
    
        语文
        英语
        数学
    

效果：

其它下拉菜单

其它下拉菜单

    课程 
    
        语文
        英语
        数学
    


    课程 
    
        语文
        英语
        数学
    


    课程 
    
        语文
        英语
        数学
    

效果：

可以选择的文本框下拉菜单：下拉菜单自动设置隐藏域的值

可以选择的文本框下拉菜单：下拉菜单自动设置隐藏域的值

    
    课程
    
    
        语文
        英语
        数学
    

效果： 可以使用浏览器的控制台查看隐藏域的值：

可以搜索的下拉菜单

可以搜索的下拉菜单

    课程
    
    
        Java
        JavaScript
        Python
    

效果：

带标签的图标按钮下拉菜单

带标签的图标按钮下拉菜单

    
    课程
    
        Java
        JavaScript
        Python
    

效果：

带标签的图标按钮下拉菜单

带标签的图标按钮下拉菜单

    
    课程
    
        
            
            
        
        Java
        JavaScript
        Python
    

多选下拉菜单

 国家
    
    
    
    请选择语言
    
        JavaScript
        Java
        Python
        Cshap
    

效果：