Question

我使用UIKIT Nav组件创建了侧栏。

这可以像这样制作手风琴。

<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>

如果我点击手风琴菜单。标签会改变它。

<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>

如果我重新加载页面，所有手风琴都会关闭。

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

我认为可以使用jQuery或PHP。

任何想法？

Answer 1

我不知道你的另一个代码，但有一种方法是这样的：

您的网址：index.php？id = 2

<?php
$page = (isset($_GET['id']))?(int)$_GET['id']:'';
?>
<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="<?=(($page==2)?'uk-active':'')?>">
                <a href="#">current</a>
            </li>
            <li>
                <a href="#">not current</a>
            </li>
        </ul>
    </li>
</ul>

此代码：

<?=(($page==2)?'uk-active':'')?>

是这个的简短表示法：

<?php 
if($page == 2){
   echo "uk-active";
}else{
   echo "";
}

Answer 2

我很抱歉回答太晚了。

最后，据我所知，开启的触发器是“活跃的”＃39;类。

与＆＃39; uk-open＆＃39;，aria-expanded =＆＃34; true＆＃34;无关。或者div bla bla bla。

只需设置＆＃39; uk-active＆＃39;你想要总是展示它的元素类。所以，这是我的解决方案。

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

而且，你需要使用$ _SERVER [＆＃39; REQUEST_URI＆＃39;]来设置uk-active类。顺便说一下，我使用的是php框架Laravel5。所以我的代码是这样的。

>>> [list(g) for ix, g in itertools.groupby(seq, lambda x: 0 if x%2==0 else x)]
[[1, 1, 1, 1], [4, 6, 8, 4], [3, 3, 3]]

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

<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>

如何做UIKIT导航手风琴永远开放？

2 个答案: