我有一个header.jsp,我将其包含在所有页面中以显示项目的标题和徽标。它有一个打开面板的链接。 //header.jsp
<div data-role="header">
<a href="#menuPanel" data-icon="bars" data-rel="panel">Menu</a>
<div data-role="panel" id="menuPanel" data-position-fixed="true" data-display="overlay" >My menu</div>
</div>
现在我正在使用多页html文档。标题将包含在所有div中,其中包含data-role = page。
<div data-role="page" id="page1">
//include header
</div>
<div data-role="page" id="page2">
//include header here
</div>
我的疑问是我的header.jsp有一个id =&#34; menuPanel&#34;的面板。两个具有相同ID的div将在我的html页面上包含两次。即使单击链接,我们也可能得到不合格的结果。如何解决这个问题,并保存我的项目,使其在DOM中包含两个具有相同id的div。我想将标题保存为单独的文件。 除了使用id之外,我的面板是否可以以其他方式打开。请提出一些解决方案
答案 0 :(得分:0)
将标题更改为使用class
而不是id
,并链接到#
:
<div data-role="header">
<a href="#" class="menuButton" data-icon="bars" data-rel="panel">Menu</a>
<div data-role="panel" class="menuPanel" data-position-fixed="true" data-display="overlay" >My menu</div>
</div>
添加一些JavaScript以打开/关闭相对于当前页面的菜单面板:
$(document).on("click", ".menuButton", function(event)
{
var pageID = $(this).closest("[data-role=page]").attr("id");
$("#" + pageID + " .menuPanel").panel("toggle");
});
<强> JSFiddle