Question

我正在使用bootstrap 3和我有一个页面，其内容动态加载require_once（）。我有一个部分的下拉菜单。

<ul class="nav nav-list">
                <li class="active">
                    <a href="<?php echo WEB_ROOT; ?>admin">
                        <i class="menu-icon fa fa-tachometer"></i>
                        <span class="menu-text"> Dashboard</span>
                    </a>

                    <b class="arrow"></b>
                </li>

                <li class="">
                    <a href="#" class="dropdown-toggle">
                        <i class="menu-icon fa fa-desktop"></i>
                        <span class="menu-text"> Catalog </span>

                        <b class="arrow fa fa-angle-down"></b>
                    </a>

                    <b class="arrow"></b>

                    <ul class="submenu">


                <li class="">
                    <a href="<?php echo WEB_ROOT; ?>admin/product/">
                        <i class="menu-icon fa fa-list-alt"></i>
                        <span class="menu-text"> Products </span>
                    </a>

                    <b class="arrow"></b>
                </li>

                    <li class="">
                    <a href="<?php echo WEB_ROOT; ?>admin/category/">
                        <i class="menu-icon fa fa-list-alt"></i>
                        <span class="menu-text"> Categories </span>
                    </a>

                    <b class="arrow"></b>
                </li>   
                    </ul>
                </li>

            </ul>

我想要做的是在选择一个部分时保持打开菜单，移动相应部分中的<li class = "active">。如果页面是静态的，那会更容易，但是这样吗？

我不知道该怎么做。这里有demo

的链接

由于

Answer 1

将此变量设置在页面顶部。

<?php $currenturl =  "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>

在菜单的每个类部分中尝试这个三元组

<?php (WEB_ROOT . 'admin/product/' == $currenturl)? 'active' : NULL ?>

（显然改变了每个网址的其余路径）。

如果您想要保持某个下拉列表打开，您可以在每个网址的末尾添加一个查询字符串，如

<?php echo WEB_ROOT; ?>admin/product?menu=catalog">

在页面上使用

<ul class="submenu <?php if(isset($_GET['menu')){ ($_GET['menu'] == 'catalog')? 'open' : NULL; } ?>">

在您的目录子菜单的类中。保持菜单打开：）。

Answer 2

你可以在给出＆＃34; li＆＃34;＆＃34;之后使用jquery函数的组合。一些名字或身份：

$("#id").click(function(){
   $("#id").addClass("active);
});

Answer 3

提供JS实现，因为@Matt Burrow已经涵盖了PHP。由于URL将始终与锚元素的href中单击的链接匹配，因此我们可以将其设为活动项。

$(function(){
    $('a[href="'+window.location.href+'"]').addClass('active');
});

当然，这肯定会破坏具有查询字符串和哈希值的URL。

引导程序和自定义下拉菜单

3 个答案: