卿岚 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日

悬赏问题

  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候，驱动要重新装才能使用，怎么解决？
  • ¥15 让node服务器有自动加载文件的功能