按照semantic-ui官网示例,编写了如下示例,却不见效果。

<div class="ui secondary menu">
<a class="item">首页</a>
<div class="ui dropdown item" id="dp1">
技术
<i class="dropdown icon"></i>
<div class="menu" id="dp2">
<div class="item">前端技术门户网</div>
<div class="item">后端技术门户网</div>
<div class="item">博客</div>
</div>
</div>
<a class="item">茶室</a>
<a class="item">理财</a>
<a class="item">门市</a>
<a class="item">设计</a>
<a class="item">健康</a>
<a class="item">博客</a>
<a class="item">俱乐部</a>
<a class="item">其它</a>
</div>

  最后试了了官网示例

http://semantic-ui.com/modules/dropdown.html#/usage

发现一样,一直找不到原因,

js脚本就是这么简单

<script>
  $('#dp1').dropdown();
</script>

  最终解决,把js放html后面就可以,在文档开始写就不行,所以说应该是加载和渲染时机问题,然而即使放ready事件中编写也不行。具体原因待查。

原因较2,由于页面中使用script标签加载js并且非异步加载,所以导致页面一直没有渲染完成,所以在加载完成前就会点击一直报no function错误。

semantic-ui dropdown is not a function的更多相关文章

  1. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

  2. Semantic UI 使用回调函数

    html代码: <div class="ui dropdown item" id="region"> <div class="tex ...

  3. Semantic UI中的验证控件的事件的使用

    1.Semantic UI中的验证控件,功能挺不错的,中文官网的文档写的都比较详细了,我再这里就不再进行重复了,主要是想说一下它的事件的使用方法,这个可能有部分朋友刚开始接触的时候不太了解 注意看这几 ...

  4. webpack 解决 semantic ui 中 google fonts 引用的问题

    semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...

  5. Semantic UI – 完全语义化的前端界面开发框架

    Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...

  6. Semantic UI 中文参考手册

    一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...

  7. 修改 Semantic UI 的默认字体

    Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic ...

  8. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  9. 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

随机推荐

  1. Android中直播视频技术探究之---基础知识大纲介绍

    一.前言 最近各种视频直播app到处都是,各种霸屏,当然我们也是需要体验的,关于视频直播的软件这里就不介绍了,在不是技术的人来看,直播是一种潮流,是一种娱乐方式,但是作为一个高技术的,我们除了看看,更 ...

  2. C# 对Xml的常用操作

    using System.Xml;  //初始化一个xml实例   XmlDocument xml=new XmlDocument(); //导入指定xml文件  xml.Load(path);   ...

  3. Bootstrap——导航栏编写

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">     ...

  4. 最小化安装centos的init初始化脚本

    #!/bin/bash #this script is appropriate .x(这脚本适合最小化安装6.x版本的系统) #you have already install the os read ...

  5. Git笔记 整理2

    补充: 1,如何只克隆git仓库中的一个分支? git clone -b <branch> <remote_repo> eg:  git clone -b vivien_dev ...

  6. 建立exception包,编写TestException.java程序,主方法中有以下代码,确定其中可能出现的异常,进行捕获处理。

    package exception; public class TestException { public static void main(String[] args) { for(int i=0 ...

  7. 禁止在 .NET Framework 中执行用户代码。启用 "clr enabled" 配置选项

    exec sp_configure 'show advanced options', '1';goreconfigure;goexec sp_configure 'clr enabled', '1'g ...

  8. Examples For When-Validate-Item trigger In Oracle Forms

    The following example finds the commission plan in the COMMPLAN table, based on the current value of ...

  9. Linux红帽认证----I Want

    仅此设定一个目标,此证一定搞到手!!!

  10. strange error encountered today in ROS

    I reinstalled my ubuntu system and also ROS. I tested slam_karto package when some strange error cam ...