php - 如何让 UIKIT nav accordion 始终打开？

Question

我用 UIKIT Nav 组件制作了一个侧边栏。

http://getuikit.com/docs/nav.html

这样可以制作 Accordion 。

<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
    <li class="uk-parent">
        <a href="#">parrent</a>
        <ul class="uk-nav-sub uk-nav-side">
            <li class="uk-active">
                <a href="#">current</a>
            </li>
            <li>
                <a href="#">not current</a>
            </li>
        </ul>
    </li>
</ul>

如果我点击 Accordion 菜单。标签会改变它。

<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
    <li class="uk-parent uk-open" aria-expanded="true">
        <a href="#">parent</a>
        <div style="overflow: hidden; position: relative;">
            <ul class="uk-nav-sub uk-nav-side">
                <li class="uk-active">
                    <a href="#">current</a>
                </li>
                <li>
                    <a href="#">not current</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

如果我重新加载页面，所有 Accordion 都将关闭。

那么我想问你的问题是如何在请求 url 为最新时始终打开？我想始终打开嵌套类 uk-active li 标签的父 ul 标签。

我认为可以使用 jQuery 或 PHP。

有什么想法吗？

Answer 1

很抱歉回复太晚了。

最后，我了解到始终打开的触发器是“uk-active”类。

与 'uk-open'、aria-expanded="true"或 div bla bla bla 没有关系。

只需在您想要始终显示的元素上设置“uk-active”类。所以，这是我的解决方案。

http://codepen.io/qwe001/pen/JKgBBx

是的，需要使用 $_SERVER['REQUEST_URI'] 来设置 uk-active 类。顺便说一句，我使用 php 框架 Laravel5。所以我的代码是这样的。

<div class="uk-width-medium">
    <div class="uk-panel uk-panel-box">
        <ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
            <li class="uk-parent {{ Request::is('admin/parent1*') ? 'uk-active' : '' }}">
                <a href="#">Parent 1 (Have Nest and Nest is current)</a>
                <ul class="uk-nav-sub uk-nav-side">
                    <li class="{{ Request::is('admin/parent1/nest1*') ? 'uk-active' : '' }}">
                        <a href="/admin/parent1/nest1">Nest 1 (current)</a>
                    </li>
                    <li class="{{ Request::is('admin/parent1/nest2*') ? 'uk-active' : '' }}">
                        <a href="/admin/parent1/nest2">Nest 2 (not current)</a>
                    </li>
                    <li class="{{ Request::is('admin/parent1/nest3*') ? 'uk-active' : '' }}">
                        <a href="/admin/parent1/nest3">Nest 3 (not current)</a>
                    </li>
                </ul>
            </li>
            <li class="{{ Request::is('admin/parent2*') ? 'uk-active' : '' }}">
                <a href="/admin/parent2">Parent 2 (Not Nest)</a>
            </li>
            <li class="uk-parent {{ Request::is('admin/parent3*') ? 'uk-active' : '' }}">
                <a href="#">Parent 3 (Have Nest but Current nests are nothing)</a>
                <ul class="uk-nav-sub uk-nav-side">
                    <li class="{{ Request::is('admin/parent3/nest1*') ? 'uk-active' : '' }}">
                        <a href="/admin/parent3/nest1">Nest 1 (not current)</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

注意:必须像这样调整父类 uk-parent 类的颜色。

/* Adjust Parent Background Color */
.uk-nav-side > li.uk-parent.uk-active > a {
    background: inherit;
    color: inherit;
}

.uk-nav-side > li.uk-parent.uk-active > a:hover,
.uk-nav-side > li.uk-parent.uk-active > a:focus {
    background: rgba(0, 0, 0, 0.05);
    color: #444;
    outline: none;
}

/* Adjust Parent Child Padding */
.uk-nav-side > li.uk-parent .uk-nav-side > li > a {
    padding-left: 1em;
}

.uk-nav-side > li.uk-parent .uk-nav-side > li.uk-active > a:hover {
    color: #FFF;
}