Question

我有一个手风琴菜单和一些样式表。

我的css和menu.php

/* The sidebar navigation */

aside nav li {
  position: relative;
}

aside nav > ul > li  a, aside nav > ul > li  a:visited {
  text-decoration: none;
}

aside nav > ul > li  a span.icon {
  display: inline-block;

  margin-right: 10px;
  margin-bottom: -4px;

  width: 16px;
  height: 16px;

  line-height: 24px;
}

aside nav > ul > li a span.icon:before {
  position: relative;
  top: 2px;
}

aside nav > ul > li a:hover span.icon:before {
  color: #4b66f1;
}

aside nav > ul > li > a, aside nav > ul > li > a:visited {
  display: block;
  padding: 0 10px;

  line-height: 35px;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);

  background: url('../img/layout/navigation/bg-normal.png') repeat-x #e7eaef;
  border-top: 1px solid #bcbcbc;
  border-bottom: 1px solid transparent;
}

aside nav > ul > li:last-child > a, aside nav > ul > li:last-child > a:visited {
  border-bottom: 1px solid #bcbcbc;
}

aside nav > ul > li > a:hover, aside nav > ul > li.current> a:hover {
  background: url('../img/layout/navigation/bg-hover.png') repeat-x #1a66be;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);

  border-color: #2e69ae;
  border-left: 1px solid #2e69ae;
  border-right: 1px solid #2e69ae;

  margin-right: -1px;
  margin-left: -1px;
}

aside nav > ul > li > a:hover:active, aside nav > ul > li.current> a:hover:active {
  background: url('../img/layout/navigation/bg-active.png') repeat-x #1758a4;
  box-shadow: none;
}

aside nav > ul > li > a.with_sub.open , aside nav > ul > li > a.with_sub.open:visited {
  border-bottom: 1px solid #bcbcbc;
}

aside nav > ul > li.current > a {
  background: url('../img/layout/navigation/bg-current.png') repeat-x #f4f4f4;
  position: relative;
  z-index: 101;
}

aside nav > ul > li.current > a {
  position: relative;
}

aside nav > ul > li.current > a:before {
  display: block;
  position: absolute;

  width: 9px;
  height: 37px;

  bottom: -1px;
  right: -9px;

  content: ' ';
  background: url('../img/layout/navigation/arrow.png');

  z-index: 101;
}

aside nav > ul > li.current > a:hover:before {
  background: url('../img/layout/navigation/arrow-hover.png');
}

aside nav > ul > li.current > a:hover:active:before {
  background: url('../img/layout/navigation/arrow-active.png');
}

aside nav > ul > li.current > a:hover:after {
  color: #fdfdfd;
}

aside nav > ul > li img {
  margin-right: 10px;

  user-select: none;
  -moz-user-select: none;
}



/* The subnavigation */
aside nav > ul > li > ul {
  display: none;
}

aside nav > ul > li > ul a {
  display: block;

  padding: 0 10px;
  padding-left: 35px;

  height: 29px;
  line-height: 29px;
}

aside nav > ul > li:last-child > ul li:last-child {
  border-bottom: 1px solid #bcbcbc;
}

aside nav > ul > li > ul a:before {
  content: '\25B2';
  color: #becadb;
  text-shadow: none;
  margin-right: 5px;

  user-select: none;
  -moz-user-select: none;
}

aside nav > ul > li > ul > li.with-icon a:before {
  display: none;
}

aside nav > ul > li > ul > li.with-icon .icon {
  margin-left: -9px;
}

aside nav > ul > li > ul > li a {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background: #eff3f6;
}

aside nav > ul > li > ul > li a:hover {
  background: #d4e2f0;
  border-color: #b2c1d2;
}

aside nav > ul > li > ul > li a:hover:active {
  background: #c9daec;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.36);
}

aside nav > ul > li > ul > li:first-child a:hover:active {
  border-top: 0;
  padding-top: 1px;
}


aside nav > ul > li > ul > li:first-child a:hover {
  border-top-color: transparent;
}

aside nav > ul > li > ul > li:last-child a:hover {
  border-bottom-color: transparent;
}

aside nav > ul > li > ul > li.current a {
  background: #e1ebf6;
}

aside nav a.with_sub {
  position: relative;
}

aside nav a.with_sub:after {
  display: block;
  position: absolute;

  right: 6px;
  top: 0px;

  content: '\25BC';

  font-size: 10px;
  color: #8f8f8f;
}

aside nav a.with_sub:hover:after {
  color: #fff;
}

aside nav a.with_sub.open:after {
  content: '\25B2';
}

<!-- The sidebar -->
<aside>
  <div class="top">


    <!-- Navigation -->
    <nav><ul>

      <li><a href="index.php?modul=dashboard&site=home"><img src="img/icons/packs/fugue/16x16/dashboard.png" alt="" height=16 width=16>Dashboard</a></li>


      <li class="current">
        <a class="open" href="#"><img src="img/icons/packs/fugue/16x16/table.png" alt="" height=16 width=16>Tables</a>
        <ul>
          <li><a href="index.php?modul=tables&site=table_1"><span class="icon icon-check-empty"></span>Table 1</a></li>
          <li class="current"><a href="index.php?modul=tables&site=table_1"><span class="icon icon-table"></span>Table 2</a></li>
          <li><a href="index.php?modul=tables&site=table_1"><span class="icon icon-fullscreen"></span>Table 3</a></li>
        </ul>
      </li>

      </ul></nav><!-- End of nav -->

  </div><!-- End of .top -->

</aside><!-- End of sidebar -->

现在我的问题是，如何在javascript或jquery的帮助下在此菜单中创建它以自动添加类当前和打开设置？

当前＆gt;打开＆gt;电流

我不知道想出来。

有人可以帮助我吗？

menu picture

Answer 1

当用户点击查询字符串的每个链接时

index.php?modul=tables&site=table_1

现在在menu.php中使用php检查为每个li添加以下条件

<li class="<?php echo $_GET['site'] == 'table_1' ? 'current' : ''">YOUR a Tag here</li>
<li class="<?php echo $_GET['site'] == 'table_2' ? 'current' : ''">YOUR a Tag here</li>
<li class="<?php echo $_GET['site'] == 'table_3' ? 'current' : ''">YOUR a Tag here</li>

开放课程

使用javascript或jquery自动将类添加到特定的折叠菜单

1 个答案: