卿岚 2022-08-10 21:17 采纳率: 76.8%
浏览 41
已结题

layui-nav 头像部分在窗口缩小时无法正常显示且独占行。

layui-nav 头像部分在窗口缩小时无法正常显示且独占行。
正常情况：（全屏）

img


不正常情况：（缩小一点）

img


正常情况：（再缩小一点）

img


代码部分：

img


img

希望第二种情况，头像部分直接隐藏，而不是往下措一行无法正常显示。而且保证不影响第一种和第三章情况。
要求：使用jQuery和layui/css解决。

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-08-10 21:35
    关注

    可以用css3 media query，超过一定宽度后隐藏头像部分

    jquery可以用下面的

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
    <div id="top">
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="#">返回登录</a></li>
            <li class="layui-nav-item"><a href="#">主界面</a></li>
            <li class="layui-nav-item">
                <a href="#">学生学籍管理</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="#">教师信息管理</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="#">课程信息管理</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="#">学校事务息管理</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="#">客户端下载</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="#">相关支持网站</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item"><a href="#">导入模板下载</a></li>
            <li class="layui-nav-item"><a href="#">数据库后台</a></li>
            <li class="layui-nav-item" style="margin-right:20px;float:right"><a href="#"><img class="layui-nav-img" alt="头像" />我</a></li>
        </ul>
    </div>


    <script src="layui/layui.js"></script>
    <script>
        layui.use(function () {
            var $ = layui.$, top = $('#top'),li=top.find('li:last'),ul=li.parent();
            top.css('overflow', 'hidden');
            var t
            $(window).resize(function () {
                clearTimeout(t);
                t = setTimeout(() => {
                    li[top.height() == ul.height() ? 'show' : 'hide']();
                    setTimeout(() => {
                        if (top.height() != ul.height()) li.hide();
                    }, 10)
                    
                }, 100)
               
            }).trigger('resize')
        });
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 8月10日
  • 已采纳回答 8月10日
  • 修改了问题 8月10日
  • 创建了问题 8月10日

悬赏问题

  • ¥15 Oracle触发器记录修改前后的字段值
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题
  • ¥15 lna设计 源简并电感型共源放大器