今天遇到一个需求,就是在页面的sidebar/左侧有一个下拉菜单,菜单有三级,前两级点击的时候会弹出下一级的菜单,最后一级点击的时候页面内容部分/右侧会展现相应的文章内容。
因为不想在每一次点击最后一级菜单的时候都去数据库读取数据或者是用ajax读取数据,所以在页面一加载的时候就已经把每个小菜单对应的文章内容也获取到了。
我的思路就是,每篇文章跟在每一个小菜单,然后用隐藏div隐藏起来,每个隐藏div都有个属性,这个属性就是小菜单的id值。当点击每一个小菜单的时候,用javascript获取到这个菜单的id值,然后获取到对应id的隐藏div里面的所有内容,然后把内容放到右侧那里。
其实如果只是点击左侧小菜单,右侧就显示相应的文章内容,是比较好实现的,只要小菜单和隐藏div都有对应相同的属性值,就能调用。例如如下代码所示:
<li class="list-group-item dropdown clearfix" sid="li_{$voco['id']}">
<a href="javascript:void(0);" name="show_div" sid="sd_{$voco['id']}">