Добавить активный класс в заголовок подменю на боковой панели [Bootstrap] - PullRequest
Новая
       11

Добавить активный класс в заголовок подменю на боковой панели [Bootstrap]

0 голосов
/ 09 февраля 2019

Мне нужна помощь.

У меня есть боковая панель начальной загрузки с 5 заголовками, 2 из которых имеют подменю.Кажется, что актив работает нормально для заголовков, которые не имеют подменю.

Я не могу заставить его работать для заголовков, которые имеют подменю ...

Вот код длябоковая панель: 

<div class="sidebar">
  <ul class="nav nav-pills nav-stacked" role="tablist" id="myPill">
    <li role="presentation" class="active"><a href="#1" role="tab" data-toggle="tab"><span class="icon-home lg-icon" aria-hidden="true"></span><br />Header 1</a></li>
    <li role="presentation"><a href="#2" role="tab" data-toggle="tab"><span class="icon-wa-infomarche lg-icon" aria-hidden="true"></span><br />Header 2</a></li>
    <li role="presentation"><a href="#3" role="tab" data-toggle="tab"><span class="icon-calendar lg-icon" aria-hidden="true"></span><br />Header 3</a></li>

    <li role="presentation">
      <a href="#" class="droptab4" data-toggle="collapse" data-target="#submenu-1"><span class="icon-niveau lg-icon" aria-hidden="true"></span> <br /> Header 4 </a>
      <ul id="submenu-1" class="collapse" style="text-align: left; padding-left: 5px">
        <li role="presentation" style="height: 35px"><a href="#40" role="tab" data-toggle="tab">Sub 0</a></li>
          <li role="presentation" style="height: 35px"><a href="#41" role="tab" data-toggle="tab">Sub 1</a></li>
          <li role="presentation" style="height: 35px" style="height: 25px"><a href="#42" role="tab" data-toggle="tab">Sub 2</a></li>
          <li role="presentation" style="height: 35px"><a href="#43" role="tab" data-toggle="tab">Sub 3</a></li>
      </ul>
    </li>

    <li role="presentation" >
      <a href="#" class="droptab5" data-toggle="collapse" data-target="#submenu-2"><span class="icon-wa-loupe lg-icon" aria-hidden="true"></span> <br /> Header 5</a>
      <ul id="submenu-2" class="collapse" style="text-align: left; padding-left: 5px">
        <li role="presentation" style="height: 35px"><a href="#50" role="tab" data-toggle="tab">Sub 0</a></li>
          <li role="presentation" style="height: 35px"><a href="#51" role="tab" data-toggle="tab">Sub 1</a></li>
          <li role="presentation" style="height: 35px"><a href="#52" role="tab" data-toggle="tab">Sub 2</a></li>
          <li role="presentation" style="height: 35px"><a href="#53" role="tab" data-toggle="tab">Sub 3</a></li>
      </ul>
    </li>

  </ul>
</div>

и вот css: 

.nav-pills>li.active>a, .nav-pills>li.active>a:focus {
  color: #0072ed;
  background-color: #ffffff;
  border-left: 3px solid #0072ed;
}
...