[thinkcmf]取消navigationFolder标签生成的li继承父navigationMenu li的class

2023-12-19 815 views
1

默认情况navigationFolder生成的下拉菜单(子菜单)ul li class是继承navigationMenu li的class,这样导致前端在写js和css的时候选择navigationMenu li会把navigationFolder li也选中。请问是否可以在navigationFolder加个选项,自定义它生成li的class和id?不然前端开发人员很不方便。。。(没少跟我抱怨)

回答

2

我将tagNavigationFolder做了些修改能够解决问题,但失去了max-level设置

 public function tagNavigationFolder($tag, $content)
    {
        //root,class,dropdown,dropdown-class
        $root          = empty($tag['root']) ? 'li' : $tag['root'];
        $class         = empty($tag['class']) ? 'dropdown' : $tag['class'];
        $dropdown      = isset($tag['dropdown']) ? $tag['dropdown'] : 'ul';
        $dropdownClass = isset($tag['dropdown-class']) ? $tag['dropdown-class'] : 'dropdown-menu';
        $childrenClass = isset($tag['children-Class']) ? $tag['children-Class'] : 'children-Class';
        $parse = <<<parse
<if condition="!empty(\$menu['children'])">
    <{$root} class="{$class}">
        {$content}
        <{$dropdown} class="{$dropdownClass}">
            <php>
            \$mLevel=\$level+1;
            </php>
            <foreach name="\$menu['children']" item="menu">
           <{$root} class="{$childrenClass}"><a href="{\$menu.href}">{\$menu.name}</a></{$root}>
           </foreach>
        </{$dropdown}>
    </{$root}>
</if>
parse;
        return $parse;
    }

还希望你们能给出完美的解决方案。

3

你可以navigationMenu里用$level 判断一下层级,生成不同的结构

4
<navigation nav-id="" root="" id="main-navigation" class="nav navbar-nav navbar-nav-custom"
                            max-level="0">
                    <navigationMenu>
                        <if condition="$level gt 1">
                            <li class="menu-item menu-item-level-{$level} levelgt1">
                                <a href="{$menu.href|default=''}" target="{$menu.target|default=''}">
                                    {$menu.name|default=''} 
                                </a>
                            </li>
                            <else/>
                            <li class="menu-item menu-item-level-{$level}">
                                <a href="{$menu.href|default=''}" target="{$menu.target|default=''}">
                                    {$menu.name|default=''}
                                </a>
                            </li>
                        </if>
                    </navigationMenu>
                    <navigationFolder root="li"
                                      class="dropdown dropdown-custom dropdown-custom-level-{$level}"
                                      dropdown="ul"
                                      dropdown-class="dropdown-menu dropdown-menu-level-{$level}">
                        <a href="#" class="dropdown-toggle dropdown-toggle-{$level}" data-toggle="dropdown">
                            {$menu.name|default=''}<span class="caret"></span>
                        </a>
                    </navigationFolder>
                </navigation>

看看这样的玩法

7
        <div class="menu" id="main-menu">

            <navigation nav-id="1" root="" id="main-navigation" class="nav navbar-nav navbar-nav-custom">
            </navigation>

            <ul>
            <volist name="menus" id="vo">
                <li  class="<if condition="count($vo.children) gt 0"/>arrow</if>"><a href="{$vo.href}">{$vo.name}<if condition="count($vo.children) gt 0"/><i></i></if> </a>
                <if condition="count($vo.children) gt 0"/>
                <div class="col-2">
                <volist name="vo.children" id="vo2">

                    <a href="{$vo2.href}">{$vo2.name}</a>
                </volist>
                </div>
               </if>
                </li>
            </volist>
            </ul>
        </div>
9

表示直接拿数据取做遍历灵活。