包括php菜单，在单击时将活动类分配给链接

Question

PHP， CSS and JS 扬声器！）我在 php 文件中包含一个菜单。我需要它，因为更改链接所需的时间更少。但是，该任务现在具有活动链接。当我单击一个链接时，它应该采取活动链接，父链接也应该采取活动链接。我用PHP做到了，它工作得很好，但是如果我继续，会有很多php语句，它也可能会影响性能，并且对代码的可读性有不好的影响。请查看代码的以下代码（这只是一个片段），即菜单的 1 个部分，而不是整个菜单）

  <!--  TAJIKISTAN section start -->
          <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>
            <!-- Sub-->
            <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>
            <!-- End Sub-->
          </li>
           <li class="slash">/</li>
           <!-- End Tajikistan -->

问：有什么方法可以用PHP或Java脚本或其他任何东西来处理它吗？

提前谢谢你！

Answer 1

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

$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应根据$level返回类字符串

如果当前 URL 与项目 URL 匹配，则isActive应返回 true/false。

---

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

在

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active"><a href="#">Home</a>
  </li>
  <li>
    <ul class="sub">
      <li class="title">Sub Items</li>
      <li>
        <ul>
          <li><a href="#">Sub 1</a>
          </li>
          <li><a href="#">Sub 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

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>