easyui layout遮挡导航菜单下拉框

一锅小青蛙 2016-09-12 12:21:56
如题，我把导航条放入了easyui latout north中，但导航条中的下拉菜单不能漂浮出div层，发现原因就是加了region=“north”，该怎么解决？

 <body class="easyui-layout">

    <!-- header -->

    <div class="header_full w_100" region="north" >

        <div class="header">

            <!-- top_left | logo -->

            <div class="logo f_l"> </div>           

            <!-- top_right -->

            <div class="top_right f_r">

                <!-- menu -->

                <div class="nav_bar">

                    <ul class="nav clearfix">



                        <!-- 单一菜单 | end -->

                        <li class="m">

                            <h3><a href="#" >首页</a></h3>

                        </li>

                        <li class="s">|</li>



                        <li class="m">

                            <h3><a target="_blank" href="#">查询统计</a></h3>

                            <ul class="sub">

                            <li ><a href="#">设备查询</a> </li>

                            </ul>

                        </li>

                        <li class="s">|</li>



                        <li class="m">

                            <h3><a target="_blank" href="#" >基础数据</a></h3>

                            <ul class="sub">

                             <li ><a href="#">设备添加</a> </li>

                             <li ><a href="#">设备绑定</a> </li>

                             </ul>

                        </li>

                        <li class="block"></li><!-- 滑动块 -->



                    </ul>

                </div>

                <!-- menu | end -->

            </div>

        </div>

    </div>

    <!-- header | end -->

    <div region="center" style="width:200px">sadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

</body>

<script>

             $(function () {

                //注意如果layout容器不是body修改选择器

                 $(document.body).layout('panel', 'north').parent().css('overflow', 'auto');

             });

         </script>


.header_full{height:47px; border-bottom:1px solid #51AACA;}

        .header{width:x;}

            /* left */

            .logo{width:210px; padding-top:27px; padding-left:66px;}

            .logo360{width:81px; padding-top:27px;}

            /* right */

            .top_right{width:748px;}

                /* top_link */

                .top_link{padding-top:24px; height:26px; line-height:26px; padding-right:35px; text-align:right;}

                    .top_link i{color:#686868;}

                    .top_link span,.top_link a{color:#46AAFE;}

                    .top_link a{font-size:13px;}

                    .top_link a:hover{text-decoration:underline;}

                /*  nav */

                .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

                    .nav_bar{position:relative; z-index:999; height:32px; line-height:42px; color:#333;padding-top:5px;}

                        .nav{position:relative; width:748px; margin:0 auto;  font-family:"Microsoft YaHei",SimSun,SimHei; font-size:14px;}

                            .nav a{color:#333;}

                            .nav h3{font-size:100%; font-weight:normal;}

                                .nav h3 a{display:block; width:120px; text-align:center; font-size:14px;}

                            .nav .m{float:left; position:relative; z-index:1;}

                            .nav .s{float:left; width:3px; text-align:center; color:#D4D4D4; font-size:12px;}

                            .nav .sub{display:none; position:absolute; left:-3px; top:42px; z-index:999; width:128px; border:1px solid #E6E4E3; border-top:0;  background:#fff;}

                                .nav .sub li{text-align:center; padding:0 8px; margin-bottom:-1px;}

                                .nav .sub li a{display:block;  border-bottom:1px solid #E6E4E3; padding:8px 0; height:28px; line-height:28px; color:#666;}

                                .nav .sub li a:hover{color:#1E95FB;cursor:pointer;}

                                .nav .block{height:3px; width:126px; background:#1E95FB; position:absolute; left:0; top:39px; overflow:hidden;}



                                /* 重用类样式 */

.f_l{float:left !important;}

.f_r{float:right !important;}

.no_margin{margin:0px !important;}

.no_border{border:0px !important;}

.no_bg{background:none !important;}

.clear_both{clear:both !important;}

.display_block{display:block !important;}

.text_over{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding: url('ellipsis.xml#ellipsis');}





/* 重用自定义样式 */

.w_100{width:100%;}

.w_95{width:95%;}

.indextx{width:980px;margin:0 auto; margin-top:10px; background:#FFFFFF;}

.w_min_width{min-width:1200px;}

.w_1200{width:1200px;}

.w_1067{width:1067px;}

.w_980{width:980px;}

以上是我的代码，现在束手无策啊，求大家帮帮忙吧
...全文
582 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
czp555 2017-08-22
  • 打赏
  • 举报
 回复
你好,你是怎么解决的啊?
唐伯虎_ 2016-12-19
  • 打赏
  • 举报
 回复
luoyuanxd 2016-10-11
  • 打赏
  • 举报
 回复
楼主，能说下怎么解决的吗，我有同样的问题。
一锅小青蛙 2016-09-13
  • 打赏
  • 举报
 回复
谢谢您的帮助，解决了
一锅小青蛙 2016-09-13
  • 打赏
  • 举报
 回复
引用 10 楼 showbo 的回复:
没测试chrome，确实有问题。。firefox可以。不行用js脚本来做了。 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <style>
        .header_full{height:47px; border-bottom:1px solid #51AACA;}
        .header{width:x;}
            /* left */
            .logo{width:210px; padding-top:27px; padding-left:66px;}
            .logo360{width:81px; padding-top:27px;}
            /* right */
            .top_right{width:748px;}
                /* top_link */
                .top_link{padding-top:24px; height:26px; line-height:26px; padding-right:35px; text-align:right;}
                    .top_link i{color:#686868;}
                    .top_link span,.top_link a{color:#46AAFE;}
                    .top_link a{font-size:13px;}
                    .top_link a:hover{text-decoration:underline;}
                /*  nav */
                .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
                    .nav_bar{position:relative; z-index:999; height:32px; line-height:42px; color:#333;padding-top:5px;}
                        .nav{position:relative; width:748px; margin:0 auto;  font-family:"Microsoft YaHei",SimSun,SimHei; font-size:14px;}
                            .nav a{color:#333;}
                            .nav h3{font-size:100%; font-weight:normal;}
                                .nav h3 a{display:block; width:120px; text-align:center; font-size:14px;}
                            .nav .m{float:left; position:relative; z-index:1;}
                            .nav .s{float:left; width:3px; text-align:center; color:#D4D4D4; font-size:12px;}
                            .nav .sub,ul.sub{display:none; position:absolute; left:-3px; top:42px; z-index:999; width:128px; border:1px solid #E6E4E3; border-top:0;  background:#fff;}
                                .nav .sub li{text-align:center; padding:0 8px; margin-bottom:-1px;}
                                .nav .sub li a{display:block;  border-bottom:1px solid #E6E4E3; padding:8px 0; height:28px; line-height:28px; color:#666;}
                                .nav .sub li a:hover{color:#1E95FB;cursor:pointer;}
                                .nav .block{height:3px; width:126px; background:#1E95FB; position:absolute; left:0; top:39px; overflow:hidden;}
 
                                /* 重用类样式 */
.f_l{float:left !important;}
.f_r{float:right !important;}
.no_margin{margin:0px !important;}
.no_border{border:0px !important;}
.no_bg{background:none !important;}
.clear_both{clear:both !important;}
.display_block{display:block !important;}
.text_over{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding: url('ellipsis.xml#ellipsis');}
 
 
/* 重用自定义样式 */
.w_100{width:100%;}
.w_95{width:95%;}
.indextx{width:980px;margin:0 auto; margin-top:10px; background:#FFFFFF;}
.w_min_width{min-width:1200px;}
.w_1200{width:1200px;}
.w_1067{width:1067px;}
.w_980{width:980px;}
.header{overflow:hidden}
    </style>
</head>
<body class="easyui-layout">
    <!-- header -->
    <div class="header_full w_100" region="north">
        <div class="header">
            <!-- top_left | logo -->
            <div class="logo f_l"> </div>
            <!-- top_right -->
            <div class="top_right f_r">
                <!-- menu -->
                <div class="nav_bar">
                    <ul class="nav clearfix" id="ulMenu">

                        <!-- 单一菜单 | end -->
                        <li class="m">
                            <h3><a href="#">首页</a></h3>
                        </li>
                        <li class="s">|</li>

                        <li class="m">
                            <h3><a target="_blank" href="#">查询统计</a></h3>
                            <ul class="sub">
                                <li><a href="#">设备查询</a> </li>
                            </ul>
                        </li>
                        <li class="s">|</li>

                        <li class="m">
                            <h3><a target="_blank" href="#">基础数据</a></h3>
                            <ul class="sub">
                                <li><a href="#">设备添加</a> </li>
                                <li><a href="#">设备绑定</a> </li>
                            </ul>
                        </li>
                        <li class="block"></li><!-- 滑动块 -->

                    </ul>
                </div>
                <!-- menu | end -->
            </div>
        </div>
    </div>
    <!-- header | end -->
    <div region="center" style="width:200px">sadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <script>
        $(function () {
            $('#ulMenu>li').hover(function () {
                var m = $(this).data('menu');
                if (!m) {
                    m = $(this).find('ul').clone();
                    m.appendTo(document.body);
                    $(this).data('menu', m);
                    var of = $(this).offset();
                    m.css({ left: of.left, top: of.top + this.offsetHeight });
                    m.hover(function () { clearTimeout(m.timer); }, function () { m.hide() });
                }
                m.show();
            }
            , function () {
                var m = $(this).data('menu');
                if (m) {
                    m.timer = setTimeout(function () { m.hide(); }, 300);//延时隐藏，时间自定义，300ms
                }
            });
        });
    </script>



</body>
</html>
测了下不知道为什么还是不行，后来我就把导航条改成了fixed，现在是center层中的iframe中如果加载其他页面没问题，但加载百度地图的话就还会遮盖下拉菜单。。
Go 旅城通票 2016-09-12
  • 打赏
  • 举报
 回复
没测试chrome，确实有问题。。firefox可以。不行用js脚本来做了。 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <style>
        .header_full{height:47px; border-bottom:1px solid #51AACA;}
        .header{width:x;}
            /* left */
            .logo{width:210px; padding-top:27px; padding-left:66px;}
            .logo360{width:81px; padding-top:27px;}
            /* right */
            .top_right{width:748px;}
                /* top_link */
                .top_link{padding-top:24px; height:26px; line-height:26px; padding-right:35px; text-align:right;}
                    .top_link i{color:#686868;}
                    .top_link span,.top_link a{color:#46AAFE;}
                    .top_link a{font-size:13px;}
                    .top_link a:hover{text-decoration:underline;}
                /*  nav */
                .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
                    .nav_bar{position:relative; z-index:999; height:32px; line-height:42px; color:#333;padding-top:5px;}
                        .nav{position:relative; width:748px; margin:0 auto;  font-family:"Microsoft YaHei",SimSun,SimHei; font-size:14px;}
                            .nav a{color:#333;}
                            .nav h3{font-size:100%; font-weight:normal;}
                                .nav h3 a{display:block; width:120px; text-align:center; font-size:14px;}
                            .nav .m{float:left; position:relative; z-index:1;}
                            .nav .s{float:left; width:3px; text-align:center; color:#D4D4D4; font-size:12px;}
                            .nav .sub,ul.sub{display:none; position:absolute; left:-3px; top:42px; z-index:999; width:128px; border:1px solid #E6E4E3; border-top:0;  background:#fff;}
                                .nav .sub li{text-align:center; padding:0 8px; margin-bottom:-1px;}
                                .nav .sub li a{display:block;  border-bottom:1px solid #E6E4E3; padding:8px 0; height:28px; line-height:28px; color:#666;}
                                .nav .sub li a:hover{color:#1E95FB;cursor:pointer;}
                                .nav .block{height:3px; width:126px; background:#1E95FB; position:absolute; left:0; top:39px; overflow:hidden;}
 
                                /* 重用类样式 */
.f_l{float:left !important;}
.f_r{float:right !important;}
.no_margin{margin:0px !important;}
.no_border{border:0px !important;}
.no_bg{background:none !important;}
.clear_both{clear:both !important;}
.display_block{display:block !important;}
.text_over{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding: url('ellipsis.xml#ellipsis');}
 
 
/* 重用自定义样式 */
.w_100{width:100%;}
.w_95{width:95%;}
.indextx{width:980px;margin:0 auto; margin-top:10px; background:#FFFFFF;}
.w_min_width{min-width:1200px;}
.w_1200{width:1200px;}
.w_1067{width:1067px;}
.w_980{width:980px;}
.header{overflow:hidden}
    </style>
</head>
<body class="easyui-layout">
    <!-- header -->
    <div class="header_full w_100" region="north">
        <div class="header">
            <!-- top_left | logo -->
            <div class="logo f_l"> </div>
            <!-- top_right -->
            <div class="top_right f_r">
                <!-- menu -->
                <div class="nav_bar">
                    <ul class="nav clearfix" id="ulMenu">

                        <!-- 单一菜单 | end -->
                        <li class="m">
                            <h3><a href="#">首页</a></h3>
                        </li>
                        <li class="s">|</li>

                        <li class="m">
                            <h3><a target="_blank" href="#">查询统计</a></h3>
                            <ul class="sub">
                                <li><a href="#">设备查询</a> </li>
                            </ul>
                        </li>
                        <li class="s">|</li>

                        <li class="m">
                            <h3><a target="_blank" href="#">基础数据</a></h3>
                            <ul class="sub">
                                <li><a href="#">设备添加</a> </li>
                                <li><a href="#">设备绑定</a> </li>
                            </ul>
                        </li>
                        <li class="block"></li><!-- 滑动块 -->

                    </ul>
                </div>
                <!-- menu | end -->
            </div>
        </div>
    </div>
    <!-- header | end -->
    <div region="center" style="width:200px">sadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <script>
        $(function () {
            $('#ulMenu>li').hover(function () {
                var m = $(this).data('menu');
                if (!m) {
                    m = $(this).find('ul').clone();
                    m.appendTo(document.body);
                    $(this).data('menu', m);
                    var of = $(this).offset();
                    m.css({ left: of.left, top: of.top + this.offsetHeight });
                    m.hover(function () { clearTimeout(m.timer); }, function () { m.hide() });
                }
                m.show();
            }
            , function () {
                var m = $(this).data('menu');
                if (m) {
                    m.timer = setTimeout(function () { m.hide(); }, 300);//延时隐藏，时间自定义，300ms
                }
            });
        });
    </script>



</body>
</html>
一锅小青蛙 2016-09-12
  • 打赏
  • 举报
 回复
引用 5 楼 showbo 的回复:
[quote=引用 2 楼 dxt_9668 的回复:] [quote=引用 1 楼 showbo 的回复:] 测试了下需要设置为inherit。。。而且body和html标签页要设置才行 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region
    <div style="position:absolute;left:0;top:0;z-index:999;width:100px;background:#eee">1<br />2<br />3<br />3<br />3<br />3<br />3<br />3<br />6</div>
    </div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
    <script>
        $(function () {
            $(document.body).layout('panel', 'north').parent().add('html,body').css('overflow', 'inherit')
        })
    </script>
</body>
</html>
还是不行呐，鼠标放上去下拉菜单被center层给遮盖了[/quote] js改这样，当前north容器也要overflow inherit测试你的代码可以。。，easyui 1.4~easyui1.4.5测试都可以 
    $(function () {
        var pl=$(document.body).layout('panel', 'north');
        pl.parent().add('html,body').add(pl).css('overflow', 'inherit')
    })
[/quote] 我就是纯复制黏贴还是不行
Go 旅城通票 2016-09-12
  • 打赏
  • 举报
 回复
不过设置overflow inherit会出现滚动条。。最好的办法就是将菜单添加到body去得了，不要放入north里面，用js来显示隐藏菜单
Go 旅城通票 2016-09-12
  • 打赏
  • 举报
 回复
引用 6 楼 dxt_9668 的回复:
[quote=引用 5 楼 showbo 的回复:] [quote=引用 2 楼 dxt_9668 的回复:] [quote=引用 1 楼 showbo 的回复:] 测试了下需要设置为inherit。。。而且body和html标签页要设置才行 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region
    <div style="position:absolute;left:0;top:0;z-index:999;width:100px;background:#eee">1<br />2<br />3<br />3<br />3<br />3<br />3<br />3<br />6</div>
    </div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
    <script>
        $(function () {
            $(document.body).layout('panel', 'north').parent().add('html,body').css('overflow', 'inherit')
        })
    </script>
</body>
</html>
还是不行呐，鼠标放上去下拉菜单被center层给遮盖了[/quote] js改这样，当前north容器也要overflow inherit测试你的代码可以。。，easyui 1.4~easyui1.4.5测试都可以 
    $(function () {
        var pl=$(document.body).layout('panel', 'north');
        pl.parent().add('html,body').add(pl).css('overflow', 'inherit')
    })
[/quote] 麻烦您能贴下测试时的完整代码吗？我这死活不行[/quote]就是你这些代码 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <style>
        .header_full{height:47px; border-bottom:1px solid #51AACA;}
        .header{width:x;}
            /* left */
            .logo{width:210px; padding-top:27px; padding-left:66px;}
            .logo360{width:81px; padding-top:27px;}
            /* right */
            .top_right{width:748px;}
                /* top_link */
                .top_link{padding-top:24px; height:26px; line-height:26px; padding-right:35px; text-align:right;}
                    .top_link i{color:#686868;}
                    .top_link span,.top_link a{color:#46AAFE;}
                    .top_link a{font-size:13px;}
                    .top_link a:hover{text-decoration:underline;}
                /*  nav */
                .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
                    .nav_bar{position:relative; z-index:999; height:32px; line-height:42px; color:#333;padding-top:5px;}
                        .nav{position:relative; width:748px; margin:0 auto;  font-family:"Microsoft YaHei",SimSun,SimHei; font-size:14px;}
                            .nav a{color:#333;}
                            .nav h3{font-size:100%; font-weight:normal;}
                                .nav h3 a{display:block; width:120px; text-align:center; font-size:14px;}
                            .nav .m{float:left; position:relative; z-index:1;}
                            .nav .s{float:left; width:3px; text-align:center; color:#D4D4D4; font-size:12px;}
                            .nav .sub{display:none; position:absolute; left:-3px; top:42px; z-index:999; width:128px; border:1px solid #E6E4E3; border-top:0;  background:#fff;}
                                .nav .sub li{text-align:center; padding:0 8px; margin-bottom:-1px;}
                                .nav .sub li a{display:block;  border-bottom:1px solid #E6E4E3; padding:8px 0; height:28px; line-height:28px; color:#666;}
                                .nav .sub li a:hover{color:#1E95FB;cursor:pointer;}
                                .nav .block{height:3px; width:126px; background:#1E95FB; position:absolute; left:0; top:39px; overflow:hidden;}
 
                                /* 重用类样式 */
.f_l{float:left !important;}
.f_r{float:right !important;}
.no_margin{margin:0px !important;}
.no_border{border:0px !important;}
.no_bg{background:none !important;}
.clear_both{clear:both !important;}
.display_block{display:block !important;}
.text_over{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding: url('ellipsis.xml#ellipsis');}
 
 
/* 重用自定义样式 */
.w_100{width:100%;}
.w_95{width:95%;}
.indextx{width:980px;margin:0 auto; margin-top:10px; background:#FFFFFF;}
.w_min_width{min-width:1200px;}
.w_1200{width:1200px;}
.w_1067{width:1067px;}
.w_980{width:980px;}
li.m:hover ul{display:block}
    </style>
</head>
<body class="easyui-layout">
    <!-- header -->
    <div class="header_full w_100" region="north">
        <div class="header">
            <!-- top_left | logo -->
            <div class="logo f_l"> </div>
            <!-- top_right -->
            <div class="top_right f_r">
                <!-- menu -->
                <div class="nav_bar">
                    <ul class="nav clearfix">

                        <!-- 单一菜单 | end -->
                        <li class="m">
                            <h3><a href="#">首页</a></h3>
                        </li>
                        <li class="s">|</li>

                        <li class="m">
                            <h3><a target="_blank" href="#">查询统计</a></h3>
                            <ul class="sub">
                                <li><a href="#">设备查询</a> </li>
                            </ul>
                        </li>
                        <li class="s">|</li>

                        <li class="m">
                            <h3><a target="_blank" href="#">基础数据</a></h3>
                            <ul class="sub">
                                <li><a href="#">设备添加</a> </li>
                                <li><a href="#">设备绑定</a> </li>
                            </ul>
                        </li>
                        <li class="block"></li><!-- 滑动块 -->

                    </ul>
                </div>
                <!-- menu | end -->
            </div>
        </div>
    </div>
    <!-- header | end -->
    <div region="center" style="width:200px">sadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <script>
    $(function () {
        var pl=$(document.body).layout('panel', 'north');
        pl.parent().add('html,body').add(pl).css('overflow', 'inherit')
    })
    </script>



</body>
</html>
一锅小青蛙 2016-09-12
  • 打赏
  • 举报
 回复
引用 5 楼 showbo 的回复:
[quote=引用 2 楼 dxt_9668 的回复:] [quote=引用 1 楼 showbo 的回复:] 测试了下需要设置为inherit。。。而且body和html标签页要设置才行 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region
    <div style="position:absolute;left:0;top:0;z-index:999;width:100px;background:#eee">1<br />2<br />3<br />3<br />3<br />3<br />3<br />3<br />6</div>
    </div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
    <script>
        $(function () {
            $(document.body).layout('panel', 'north').parent().add('html,body').css('overflow', 'inherit')
        })
    </script>
</body>
</html>
还是不行呐，鼠标放上去下拉菜单被center层给遮盖了[/quote] js改这样，当前north容器也要overflow inherit测试你的代码可以。。，easyui 1.4~easyui1.4.5测试都可以 
    $(function () {
        var pl=$(document.body).layout('panel', 'north');
        pl.parent().add('html,body').add(pl).css('overflow', 'inherit')
    })
[/quote] 麻烦您能贴下测试时的完整代码吗？我这死活不行
Go 旅城通票 2016-09-12
  • 打赏
  • 举报
 回复
引用 2 楼 dxt_9668 的回复:
[quote=引用 1 楼 showbo 的回复:] 测试了下需要设置为inherit。。。而且body和html标签页要设置才行 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region
    <div style="position:absolute;left:0;top:0;z-index:999;width:100px;background:#eee">1<br />2<br />3<br />3<br />3<br />3<br />3<br />3<br />6</div>
    </div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
    <script>
        $(function () {
            $(document.body).layout('panel', 'north').parent().add('html,body').css('overflow', 'inherit')
        })
    </script>
</body>
</html>
还是不行呐，鼠标放上去下拉菜单被center层给遮盖了[/quote] js改这样，当前north容器也要overflow inherit测试你的代码可以。。，easyui 1.4~easyui1.4.5测试都可以 
    $(function () {
        var pl=$(document.body).layout('panel', 'north');
        pl.parent().add('html,body').add(pl).css('overflow', 'inherit')
    })
一锅小青蛙 2016-09-12
  • 打赏
  • 举报
 回复
引用 3 楼 showbo 的回复:
[quote=引用 2 楼 dxt_9668 的回复:] [quote=引用 1 楼 showbo 的回复:] 测试了下需要设置为inherit。。。而且body和html标签页要设置才行 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region
    <div style="position:absolute;left:0;top:0;z-index:999;width:100px;background:#eee">1<br />2<br />3<br />3<br />3<br />3<br />3<br />3<br />6</div>
    </div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
    <script>
        $(function () {
            $(document.body).layout('panel', 'north').parent().add('html,body').css('overflow', 'inherit')
        })
    </script>
</body>
</html>
还是不行呐，鼠标放上去下拉菜单被center层给遮盖了[/quote] 菜单的z-index设置了吗。。设置999。我发的这代码1.4.5版本的easyui测试没有问题[/quote] 设了 
<body class="easyui-layout">
    <!-- header -->
    <div class="header_full w_100" region="north" >
        <div class="header" >
            <!-- top_left | logo -->
            <div class="logo f_l"> </div>			
            <!-- top_right -->
            <div class="top_right f_r">
                <!-- menu -->
                <div class="nav_bar" style="position:absolute;z-index:999" >
                    <ul class="nav clearfix">
                                      
                        <!-- 单一菜单 | end -->
                        <li class="m">
                            <h3><a href="#" >首页</a></h3>
                        </li>
                        <li class="s">|</li>

                        <li class="m">
                            <h3><a target="_blank" href="#">查询统计</a></h3>
                            <ul class="sub">
	                        <li ><a href="#">设备查询</a> </li>
                            </ul>
                        </li>
                        <li class="s">|</li>

                        <li class="m">
                            <h3><a target="_blank" href="#" >基础数据</a></h3>
                            <ul class="sub">
	                         <li ><a >设备添加</a> </li>
                             <li ><a >设备绑定</a> </li>
							 </ul>
                        </li>
                        <li class="block"></li><!-- 滑动块 -->
                        
                    </ul>
                </div>
                <!-- menu | end -->
            </div>
        </div>
    </div>
    <!-- header | end -->
    <div region="center"  id="p" style="overflow-y:hidden;"></div>
    <div region="west"   split="true" style="width:200px" >dssdsdsd</div>
    <script>$(function () {
    $(document.body).layout('panel', 'north').parent().add('html,body').css('overflow', 'inherit')
})</script>
</body>
Go 旅城通票 2016-09-12
  • 打赏
  • 举报
 回复
引用 2 楼 dxt_9668 的回复:
[quote=引用 1 楼 showbo 的回复:] 测试了下需要设置为inherit。。。而且body和html标签页要设置才行 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region
    <div style="position:absolute;left:0;top:0;z-index:999;width:100px;background:#eee">1<br />2<br />3<br />3<br />3<br />3<br />3<br />3<br />6</div>
    </div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
    <script>
        $(function () {
            $(document.body).layout('panel', 'north').parent().add('html,body').css('overflow', 'inherit')
        })
    </script>
</body>
</html>
还是不行呐，鼠标放上去下拉菜单被center层给遮盖了[/quote] 菜单的z-index设置了吗。。设置999。我发的这代码1.4.5版本的easyui测试没有问题
一锅小青蛙 2016-09-12
  • 打赏
  • 举报
 回复
引用 1 楼 showbo 的回复:
测试了下需要设置为inherit。。。而且body和html标签页要设置才行


<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Full Layout - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="../demo.css">

	<script type="text/javascript" src="../../jquery.min.js"></script>

	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body class="easyui-layout">

	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region

    <div style="position:absolute;left:0;top:0;z-index:999;width:100px;background:#eee">1<br />2<br />3<br />3<br />3<br />3<br />3<br />3<br />6</div>

    </div>

	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>

	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>

	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>

	<div data-options="region:'center',title:'Center'"></div>

    <script>

        $(function () {

            $(document.body).layout('panel', 'north').parent().add('html,body').css('overflow', 'inherit')

        })

    </script>

</body>

</html>


还是不行呐，鼠标放上去下拉菜单被center层给遮盖了
Go 旅城通票 2016-09-12
  • 打赏
  • 举报
 回复
测试了下需要设置为inherit。。。而且body和html标签页要设置才行 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region
    <div style="position:absolute;left:0;top:0;z-index:999;width:100px;background:#eee">1<br />2<br />3<br />3<br />3<br />3<br />3<br />3<br />6</div>
    </div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
    <script>
        $(function () {
            $(document.body).layout('panel', 'north').parent().add('html,body').css('overflow', 'inherit')
        })
    </script>
</body>
</html>
EasyUI 下拉菜单 下拉树 模糊搜索
支持下拉菜单 下拉树 模糊搜索,支持中间字段的匹配
jQuery EasyUI 1.3.2 离线API简体中文版
近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案，所以查了一下EasyUI的相关资料，发现离线的中文API不太多，而且版本都比较老，索性自己讲EasyUI官网给扣下来，然后做了翻译，文档是2月份过年的时候...
jQuery EasyUI 1.2.4 API 中文文档.chm
本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档（完整）目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...
jQuery EasyUI 1.4.3 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示
相隔4个多月EasyUI又更新了，这次主要是修改BUG和功能改进，有1个新增组件，具体内容可参考文档内的更新说明。本次除了组件的API更新外还对工具包中的皮肤和插件进行了更新，此外还新增了2个实用插件。 jQuery ...
jQuery EasyUI 1.3.5 离线简体中文API文档
pagination：新增“layout”属性，用于自定义控件的样式布局； accordion：新增“unselect”方法、“onUnselect”事件； accordion：新增“select”和“multiple”属性； accordion：新增“getSelections”方法；...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章