我正在开发一个有侧边栏1的网站，单击侧边栏1中的一个选项后 - 它会在其旁边打开一个侧边栏2，从侧边栏2中选择一个选项后 - 它会在页面的其余空间中打开相关视图。我也在尝试使它有点动画。
如果你看菜单，像这样的东西：https://webdesignersdream.files.wordpress.com/2013/11/everlytic-cms-dashboard-by-zoe-love7.png
（在我的情况下，菜单也可以不显示"隐藏菜单"并获得整页显示）
目前，我有一个标题.php视图，其中包含所有头部内容，以及一个仪表板.php其中包含菜单和内容部分，每当单击选项时，该部分都会刷新所有页面。
因为当单击一个选项时，它会在控制器中运行我想要显示的视图：
public function index(){
$this->load->view('header');
$this->load->view('dashboard');
$this->load->view('kas/kas_main');
$this->load->view('footer');
}
并刷新一切。
如何创建单击选项时不刷新的交互式菜单？
我知道wordpress网站在单击菜单中的选项后确实会刷新，甚至推荐这样做吗？
仪表板.php：
<div class="sidebar">
<div class="list">
<ul class="menu">
<li>
<span>firs main option</span>
<ul>
<li>
<a href="<?php echo base_url();?>kas"><span>option 1</span></a>
</li>
<li>
<a href="<?php echo base_url();?>exx"><span>option 1</span></a>
</li>
<li>
<a href="<?php echo base_url();?>weekly_reports"><span>option 1</span></a>
</li>
</ul>
</li>
<li>
<span>second main option</span>
<ul>
<li>
<a href="<?php echo base_url();?>mailer-generator"><span> Mailer Generator</span></a>
</li>
<li>
<a href="<?php echo base_url();?>mailer-generator2"><span> Mailer Generator 2</span></a>
</li>
</ul>
</li>
</ul>
</div> <!-- END List -->
<div id="logout">
<a href='<?php echo base_url()."dashboard/logout" ?>'> Logout </a>
</div>
</div> <!-- END sidebar -->
您必须使用 AJAX 来实现这一点。
这将阻止重新加载页面。
http://www.w3schools.com/ajax/
.HTML
<span class='option' data-option='1'>first main option</span>
.JS
$('span.option').click(function(){
var option = $(this).attr('data-option');
$.ajax({
url: "main/options",
type: "POST",
data: {opt: option},
dataType: "html",
success:function(result){
$('#content').html(result);
}
});
});
控制器（主/选件）
public function option(){
echo $this->load->view( $_POST['opt'], null, true);
}