1

菜单列表

 <ul class="nav nav-list" style="top: 0px;">
            <li class="active open">
                <a href="/">
                    <i class="menu-icon fa fa-tachometer"></i> 
                    <span class="menu-text"> 首页 </span> 
                </a> 
                <b class="arrow"></b>                 
            </li> 
            <li class="" url="/test1">               
                <a href="javascript:void(0);" class="dropdown-toggle">
                    <i class="menu-icon fa"></i> 
                    <span class="menu-text"> test1 </span>  
                    <b class="arrow fa fa-angle-down"></b>
                </a> 
                <b class="arrow"></b> 
                            <ul class="submenu nav-hide" style="display: none;">
                        
                        <li class="" url="test1-1">
                            <a href="javascript:void(0);"> 
                                <i class="menu-icon fa fa-caret-right"></i> 
                                test1-1
                            </a> 
                            <b class="arrow"></b>
                        </li> 
                        <li class="" url="test1-2">
                            <a href="javascript:void(0);"> 
                                <i class="menu-icon fa fa-caret-right"></i> 
                                test1-2
                            </a> 
                            <b class="arrow"></b>
                        </li> 
                </ul>                                   
            </li> 
            
            <li class="" url="/test1">
                
                <a href="javascript:void(0);" class="dropdown-toggle"> 
    
                    <i class="menu-icon fa"></i> 
                    <span class="menu-text"> test1 </span> 
                     
                    <b class="arrow fa fa-angle-down"></b>
                
                </a> 
                <b class="arrow"></b> 
                            <ul class="submenu nav-hide" style="display: none;">
                        
                        <li class="" url="test2-1">
                            <a href="javascript:void(0);"> 
                                <i class="menu-icon fa fa-caret-right"></i> 
                                test1-1
                            </a> 
                            <b class="arrow"></b>
                        </li> 
                        <li class="" url="test2-2">
                            <a href="javascript:void(0);"> 
                                <i class="menu-icon fa fa-caret-right"></i> 
                                test2-2
                            </a> 
                            <b class="arrow"></b>
                        </li> 
                        
                </ul>
                                    
            </li> 
            
        </ul>

菜单列表对应的js

  <script src="assets/js/jquery-2.1.4.min.js></script>
        <script>
        $(function () {
              $('.nav ul > li').click(function () {
                
                var self = $(this);
                var url = self.attr("url");
                $('#iframeMain').attr('src', url);
                self.siblings().removeClass('active');
                self.addClass('active');
                
                var parent = $(this).parent().parent();
                parent.siblings().removeClass('active open');
                parent.addClass('active open');
                parent.siblings().children('ul').attr('style', 'display:none;');
                parent.siblings().children('ul').children('li').attr('class', '');
              });
        })
        </script>

iframe框

 <iframe name="iframeMain" id="iframeMain" src="/main" scrolling="no" frameborder="0" width="100%" height="100%">
            该浏览器不支持iframe,请使用其他浏览器!
            </iframe>
    <!--iframe框自适应js-->
            <script type="text/javascript">
            function changeFrameHeight(){
                var ifm= document.getElementById("iframeMain"); 
                ifm.height=document.documentElement.clientHeight;
            }
            window.onresize=function(){  
                 changeFrameHeight();  
            } 
            </script>
        

在laravel框架中,声明一个首页controller和view,ifarme放在首页view中,其他controller和view正常对应,通过首页iframe调用其他页面来实现管理后台的iframe嵌套功能。


疯狂的麦克斯
137 声望3 粉丝

I'm a bug