Question

PHP，CSS和JS发言人！）我在php文件中包含一个菜单。我需要它，因为更改链接所需的时间更少。但是，现在的任务是使用 ACTIVE链接。当我点击链接时，它应该是活动的，而父链接也应该采用活动链接。我用PHP做了，它工作正常，但是如果我继续，会有很多php语句和它也可能影响性能，并且它对可读性有不良影响< / em>的代码。请看一下代码的下面代码（这只是一个FRAGMENT），即菜单的1个部分，而不是整个菜单）

<li class="megamenu"><a <?php if($activePageL0 == "tajikistan") { echo "class = \"mn-has-sub active button_open \" "; }else {echo "class = \"mn-has-sub button_open \" ";} ?> >Tajikistan <i class="fa fa-angle-down button_open"></i></a>  <ul class="mn-sub mn-has-multi"> <li <?php if($activePageL1 == "tajikistan-sub") { echo "class = \"mn-sub-multi active button_open\" "; }else {echo "class = \" mn-sub-multi button_open \" ";} ?> > <a class="mn-group-title button_open">Tajikistan</a> <ul> <li <?php if($activePageL2 == "tajikistan-history") { echo "class = \"active\" "; }else {echo "class = \" \" ";} ?> ><a href="<?php echo "$root/$lang"; ?>/tajikistan-history.php">History</a></li> <li><a href="#">Culture </a></li> <li><a href="#">Holidays</a></li> <li><a href="#">Short info</a></li> </ul> </li> <li class="mn-sub-multi"><a class="mn-group-title">Mountains</a> <ul> <li><a href="#">The Pamirs</a></li> <li><a href="#">Fann </a></li> <li><a href="#">Peak Ismoili Somoni</a></li> <li><a href="#">K.Marx & F.Engles</a></li> </ul> </li> </ul>  </li> <li class="slash">/</li> 

问题：有没有办法用PHP或Java Script或任何东西来处理它？</ p>
提前谢谢！

Answer 1

将所有菜单链接放到单个数组中：

GET ngramtest/MyEntity/_search
{
  "query": {
    "match": {
      "testField": {
        "query": "000681", 
        "analyzer": "standard"
      }
    }
  }
}

现在使用递归函数来运行$menu = [ [ 'title' => 'home', 'url' => 'index.php', ], [ 'title' => 'Menu with dropdown', 'key' => 'subs', 'items' => [ [ 'title' => 'Sub 1', 'url' => 'page/sub1', ], [ 'title' => 'Sub 2', 'url' => 'page/sub2', ], ... ], ... ] ]并生成菜单结构：

$menu

使用递归函数，您几乎可以拥有任意数量的级别。

showMenu($menu); function showMenu(&$menu, $level = 0) { foreach ($menu as $item) { $class = getItemClass($item, $level).' '.(isActive($item['key'], $level) ? ' active' : ''); if (isset($item['items'])) { echo "<ul>"; echo "<li class='{$class}'>"; showMenu($item, $level + 1); echo "</li>"; echo "</ul>"; } else { echo "<li class='{$class}'><a href='{$item['url']}'>{$item['title']}</a></li>"; } } }应根据getItemClass

返回类字符串如果当前URL与项目URL匹配，则

$level应返回true / false。

如果你没有重新加载页面，那么你可以使用jQuery选项。

在页面上通过PHP加载设置活动元素，而不是在链接上单击删除所有isActive类，并仅添加到父项。

＆＃13;

.active

＆＃13;

$(document).ready(function() {
  $('a').click(function() {
    $('.active').removeClass('active');

    $(this)
      .closest('li')
      .addClass('active')
      .parents('ul')
      .addClass('active')
      .last()
      .removeClass('active');

  })
});

＆＃13;

ul {
  padding: 0;
  list-style: none;
}
.sub > li > ul {
  padding-left: 10px;
}
.active {
  border: 1px solid #ddd;
}
li.active,
li.active a {
  background-color: #000;
  color: white;
}

＆＃13;

Answer 2

这是我使用jquery的例子。在您的情况下，您可以将活动类渲染为最后选择的子菜单，然后使用jquery将css规则应用于此节点的父级。

$('li').click(function (){
	$(this).children('span:first-child').addClass('active');
  $(this).parent('li span:first-child').addClass('active');
});

li{
  width: 100px;
  height: 40px;
}
.active{
  background-color: #12323A;
}

li:hover{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li><span>Level 1</span></li>
 <li><span>level 2</span>
   <ul>
     <li><span>Level 2.1</span></li>
     <li> <span>Level 3</span>
       <ul>
       <li><span>Level 3.1</span></li>
       </ul>
     </li>
   </ul>
 </li>
</ul>

包括php菜单，点击

2 个答案: