我显然不知道如何在父菜单<li> tag
有class="active"
时将class="current"添加到父菜单的<li> tag
。我尝试使用 jQuery 来实现这一点,但它不起作用,因为单击页面时会重新加载。因此,我只是将一个名为 name
的字段添加到数据库中以用作参数。呻吟是我的PHP代码:
echo '<ul>';
$main_menu = model::getMainMenu();
foreach($main_menus as $menu){
echo '<li class="dropdown">
<a href=?page='.$menu['name'].'&m=1 class='.(($_GET['page'] == $menu['name'])?'current':'').'>'.$menu['title'].'</a>';
$sub_menus = model::getSubMenu($menu['id']);
if( $sub_menus != '' ){
echo '<ul>';
foreach($sub_menus as $sub){
echo '<li><a href=?page='.$sub['name'].' class='.(($_GET['page']==$sub['name'])?'current':'').'>'.ucwords( $sub['title'] ).'</a></li>';
}
echo '</ul>';
}
echo '</li>';
}
</ul>
我只能通过比较$_GET['page'] and the $sub['name']
来检测哪个子页面或页面当前处于活动状态(我的 url 结构就像这个index.php?page=home
)。但是,我不知道当前选择父菜单的子菜单时如何检测父菜单。
我在这里上传了页面
请参阅下面的代码。不确定它是否完全正确,但想法应该从中清楚。基本上 - 您可以将所有 LI html 收集到一个变量中,并在其中一个 LI 处于活动状态时将标志设置为 tru。并且比回显所有考虑到标志变量状态的所有内容。
echo '<ul>';
$main_menu = model::getMainMenu();
foreach($main_menus as $menu) {
$sub_menus = model::getSubMenu($menu['id']);
$lis = "";
$hasCurrent = false;
if($sub_menus != '') {
foreach($sub_menus as $sub) {
$lis .= '<li><a href=?page='.$sub['name'].' class='.(($_GET['page']==$sub['name'])?'current':'').'>'.ucwords( $sub['title'] ).'</a></li>';
if($_GET['page']==$sub['name']) {
$hasCurrent = true;
}
}
echo '<li class="dropdown ' . $hasCurrent ? 'active' : '' . '">
<a href=?page='.$menu['name'].'&m=1 class='.(($_GET['page'] == $menu['name'])?'current':'').'>'.$menu['title'].'</a>';
if($lis != '') {
echo '<ul>';
echo $lis;
echo '</ul>';
}
}
echo '</li>';
}
</ul>
一种可能的解决方案:
给"active"标签一个ID,而不是一个类 - 因为一次只能有一个页面处于活动状态(大概)。
然后使用 Javascript 遍历 DOM 并找到父元素:
var active_elem = document.getElementById("active");
var parent_element = active_elem.parentElement.parentElement;
然后分配类/ID或任何你想做的事情。