0

我显然不知道如何将 class="current" 添加到<li> tag父菜单<li> tag的class="active". 我尝试使用 jQuery 来实现这一点，但它不起作用，因为单击它时页面会重新加载。所以我只是简单地name在数据库中添加了一个字段作为参数。Bellowing 是我的 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）。但是，我不知道在当前选择子菜单时如何检测父菜单。

我在这里上传了页面

4

2 回答 2

2

请参阅下面的代码。不确定它是否完全正确，但想法应该很清楚。基本上 - 如果其中一个 LI 处于活动状态，您可以将所有 LI html 收集到一个变量中并将标志设置为 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>
于 2012-09-20T14:07:15.503 回答
0

一种可能的解决方案：

给“活动”标签一个 ID，而不是一个类 - 因为一次只能激活一个页面（大概）。

然后使用 Javascript 遍历 DOM 并找到父元素：

var active_elem = document.getElementById("active");
var parent_element = active_elem.parentElement.parentElement;

然后分配班级/ ID 或您想做的任何事情。

于 2012-09-20T14:00:10.537 回答