关于layui导航栏不展示下拉列表的解决方法

 更新时间:2019年09月25日 15:44:42   作者:aimashi@@@  
今天小编就为大家分享一篇关于layui导航栏不展示下拉列表的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在使用导航栏时下拉列表不展示

没有下拉效果是这样的

经过修改后就解决了:

具体原因是没有导入:layui/layui.js

我的jsp代码是这样的:

<html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<meta http-equiv="Cache-Control" content="no-siteapp" />
 
<link rel="shortcut icon" href="/favicon.ico" rel="external nofollow" type="image/x-icon" />
<link rel="stylesheet" href="/ssm/static/css/font.css" rel="external nofollow" >
<link rel="stylesheet" href="/ssm/static/css/xadmin.css" rel="external nofollow" >
<link rel="stylesheet" href="/ssm/static/lib/layui/css/layui.css" rel="external nofollow" />
<script type="text/javascript" src="/ssm/jquery/jquery-1.4.4.min.js"></script>
<script src="/ssm/static/lib/layui/layui.all.js" charset="utf-8"></script>
<script src="/ssm/static/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/ssm/static/js/xadmin.js"></script>
 
<head>
<title>Title</title>
</head>
<script>
//注意:导航 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
 
});
</script>
<body>
<ul class="layui-nav">
<li class="layui-nav-item">
<a href="">控制台<span class=" rel="external nofollow" layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">个人中心<span class=" rel="external nofollow" layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item">
<a href=""><img src=" rel="external nofollow" //t.cn/RCzsdCq" class="layui-nav-img">我</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改信息</a></dd>
<dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >安全管理</a></dd>
<dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退了</a></dd>
</dl>
</li>
</ul>
</body>
</html>

以上这篇关于layui导航栏不展示下拉列表的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 一个极为简单的requirejs实现方法

    一个极为简单的requirejs实现方法

    下面小编就为大家带来一篇一个极为简单的requirejs实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • BootStrap与validator 使用笔记(JAVA SpringMVC实现)

    BootStrap与validator 使用笔记(JAVA SpringMVC实现)

    这篇文章主要介绍了BootStrap与validator 使用笔记(JAVA SpringMVC实现)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理

    基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理

    在很多系统模块里面,我们可能都需要进行一定的数据交换处理,这样可以很好的达到用户操作体验感,接下来通过本文给大家介绍基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理相关知识,非常具有参考价值,感兴趣的朋友一起学习吧
    2016-05-05
  • 浅谈JavaScript 的执行顺序

    浅谈JavaScript 的执行顺序

    JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马
    2015-08-08
  • javascript 简练的几个函数

    javascript 简练的几个函数

    看CSDN上别人的代码,感觉比较精炼,拿来主义,需要的朋友可以看下。
    2009-08-08
  • JavaScript中Number的对象解析

    JavaScript中Number的对象解析

    这篇文章主要介绍了JavaScript中Number的对象解析,Number对象是数值对应的包装对象,可以作为构造函数使用,也可以作为工具函数使用,感兴趣的朋友可以参考一下下面文章内容
    2022-08-08
  • js定时器实例分享

    js定时器实例分享

    本篇文章主要介绍了js 定时器的语法、实例、与实现代码分析。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JS判断对象属性是否存在的五种方案分享

    JS判断对象属性是否存在的五种方案分享

    编写JS的过程中,我们经常用到对象,也会用到对象中的属性,下面这篇文章主要给大家介绍了关于JS判断对象属性是否存在的五种方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • 脚本控制自适应高度的缩短问题

    脚本控制自适应高度的缩短问题

    脚本控制自适应高度的缩短问题...
    2007-10-10
  • js中let能否完全替代IIFE

    js中let能否完全替代IIFE

    这篇文章主要介绍了js中let能否完全替代IIFE,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06

最新评论