選單列表
<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巢狀功能。