纯PHP或CSS-树菜单仅显示活动节点

马那拉鲁卡

我已经使用递归函数在PHP中构建了一个树菜单,但工作正常。我的菜单结构是这样的:


---- Categ1
------- Categ11
--------- Categ111
--------- Categ112
------- Categ12
-------- -Categ121
--------- Categ122
---- Categ2
---- Categ3
---- Categ4

我正在使用引导程序。

我只需要显示活动节点和顶级子级。对于我的示例,我需要这样打开菜单(我单击了Categ 112并隐藏了Categ12的子类别):

---- Categ1
------- Categ11
--------- Categ111
--------- Categ112
------- Categ12
---- Categ2
---- Categ3
---- Categ4

生成我的菜单树的php函数是:

/** show all subcategs of the selected category
 * @param $iCategIDSelected
 * @param null $arrCategs
 * @param bool $bIsOnTheLeaf
 * @return string
 */
static function getHTMLCategsForMenuBySelected($iCategIDSelected, $arrCategs=null, $arrAllParents=null){

    $bIsVisible = false;
    if($arrCategs == null){
        $oController = new ShopcategoriesController();
        $arrCategs = $oController->getShopCategories(0);
    }

    //find if we make the current node visible or not
    //if the current node id is on the parent's of the selected node then make it visible
    //take all nodes starting with root until the selected node
    if($arrAllParents==null){
        $arrAllParents = ShopcategoriesController::getParentsBySelectedCategID($iCategIDSelected,$arrCategs);
    }


    $sHTML = '<ul class="nav nav-pills nav-stacked">';

    foreach($arrCategs as $oneCateg){
        //find if is active or not
        $bActiveClass = '';
        if(in_array($oneCateg['id'],$arrAllParents)){$bActiveClass = 'active';}

        $sHTML .= '<li class="'.$bActiveClass.'">';
        $sHTML .= '<a href="'.URL::to('showcategory/'.$oneCateg['id']).'" class="list-group-item">'.ucfirst($oneCateg['name']).'</a>';
        if(count($oneCateg['subCategories'])>0){

            $sHTML .= ShopcategoriesController::getHTMLCategsForMenuBySelected($iCategIDSelected, $oneCateg['subCategories'],$arrAllParents);
            $sHTML .= '</li>';
        }else{
            $sHTML .= '';
        }
    }
    $sHTML .= '</ul>';
    return $sHTML;
}

html结构为:

ul.nav > li > a{
    padding-left: 30px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="menuCateg">
	<ul class="nav nav-pills nav-stacked">
		<li class="active">
			<a class="list-group-item" href="http://localhost:8000/showcategory/1">Categ1</a>
			<ul class="nav nav-pills nav-stacked">
				<li class="active">
					<a class="list-group-item" href="http://localhost:8000/showcategory/2">Categ11 </a>
					<ul class="nav nav-pills nav-stacked">
						<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/3">Categ111</a></li>
						<li class="active"><a class="list-group-item" href="http://localhost:8000/showcategory/4">Categ112</a></li>
					</ul>
				</li>
				<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/18">Categ12</a></li>
			</ul>
		</li>
		<li class="">
          <a class="list-group-item" href="http://localhost:8000/showcategory/6">Categ2</a>
          <ul class="nav nav-pills nav-stacked">
			<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/3">Categ121</a></li>
			<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/4">Categ122</a></li>
		  </ul>
      </li>
		<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/8">Categ3</a>
		<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/8">Categ4</a>
	</ul>
    </div>

马那拉鲁卡

我找到了解决方案,以便生成带有多级子类别的菜单树,并仅显示已选择的级别(树中没有所有子级)。

绝招是那些线:

 if( //if the current subcateg parentid is on the parent that must be active then show his children's otherwise do not
                ( in_array($oneCateg['parentid'],$arrAllParents)  && in_array($oneCateg['id'],$arrAllParents))
            )

感谢您的帮助!

/** show all subcategs of the selected category
 * @param $iCategIDSelected
 * @param null $arrCategs
 * @param bool $bIsOnTheLeaf
 * @return string
 */
static function getHTMLCategsForMenuBySelected($iCategIDSelected, $arrCategs=null, $arrAllParents=null, $iLevel=0){

    $bIsVisible = false;
    if($arrCategs == null){
        $oController = new ShopcategoriesController();
        $arrCategs = $oController->getShopCategories(0);
    }

    //find if we make the current node visible or not
    //if the current node id is on the parent's of the selected node then make it visible
    //take all nodes starting with root until the selected node
    if($arrAllParents==null){
        $arrAllParents = ShopcategoriesController::getParentsBySelectedCategID($iCategIDSelected,$arrCategs);
        $arrAllParents[]=0;
    }

    $iLevel++;
    $sHTML = '<ul class="nav nav-pills nav-stacked level_'.$iLevel.'">';

    foreach($arrCategs as $oneCateg){
        //find if is active or not
        $bActiveClass = '';
        if(in_array($oneCateg['id'],$arrAllParents)){$bActiveClass = 'active';}

        $sHTML .= '<li class="'.$bActiveClass.'">';
        $sHTML .= '<a href="'.URL::to('showcategory/'.$oneCateg['id']).'" class="list-group-item">'.ucfirst($oneCateg['name']).'</a>';
        if(count($oneCateg['subCategories'])>0){
            if( //if the current subcateg parentid is on the parent that must be active then show his children's otherwise do not
                ( in_array($oneCateg['parentid'],$arrAllParents)  && in_array($oneCateg['id'],$arrAllParents))
            ) {
                $sHTML .= ShopcategoriesController::getHTMLCategsForMenuBySelected($iCategIDSelected, $oneCateg['subCategories'], $arrAllParents, $iLevel);
                $sHTML .= '</li>';
            }
        }else{
            $sHTML .= '';
        }
    }
    $sHTML .= '</ul>';
    return $sHTML;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

style.php 打印纯文本而不是显示 css

来自分类Dev

带边框的纯CSS树

来自分类Dev

纯CSS子菜单垂直

来自分类Dev

悬停时使活动菜单标记滑动并使用纯CSS单击?

来自分类Dev

PHP:具有递归功能的嵌套菜单,仅扩展某些节点(并非所有树)

来自分类Dev

CSS和jQuery代码在第200次迭代中以纯文本格式显示[php]

来自分类Dev

PHP显示为纯文本

来自分类Dev

PHP只显示纯文本

来自分类Dev

用CSS突出显示活动菜单链接

来自分类Dev

用CSS突出显示活动菜单链接

来自分类Dev

使用纯CSS和HTML创建菜单

来自分类Dev

使用纯CSS在菜单下滑动箭头

来自分类Dev

如何使用纯CSS弹出菜单

来自分类Dev

使用纯CSS和HTML创建菜单

来自分类Dev

纯CSS菜单,过渡不起作用

来自分类Dev

如何使此菜单成为纯CSS?

来自分类Dev

使用纯CSS在菜单下滑动箭头

来自分类Dev

HTML / CSS当前活动菜单未显示为活动

来自分类Dev

纯 CSS 视差 + 导航显示滚动

来自分类Dev

试图制作一个纯CSS下拉菜单-子菜单不在主节点下

来自分类Dev

创建纯CSS下拉菜单-子节点不会出现

来自分类Dev

纯CSS菜单-悬停时子菜单消失

来自分类Dev

使用纯 css 从移动菜单切换到默认菜单

来自分类Dev

活动输入表单-出现标签-纯CSS解决方案

来自分类Dev

纯CSS下拉菜单单击以隐藏还是显示div?

来自分类Dev

纯CSS下拉菜单单击以隐藏还是显示div?

来自分类Dev

左侧onclick上的纯HTML / CSS垂直菜单在右侧显示内容(无JavaScript)

来自分类Dev

在错误元素悬停时触发纯CSS下拉菜单

来自分类Dev

纯HTML和CSS汉堡菜单不起作用