Как добавлять класс css динамически?

417

14 июня 2017, 00:19

Есть меню, все элементы которого открываются вправо вниз лесенкой.
Кроме последнего, последний элемент должен открываться вправо вверх.
я добавил:

.menu ul li:hover > .bottom-menu{
  bottom: 0; 
  top: auto; 
}

Но нужно делать это динамически. Т.е. у меня все категории меню перебираются итератором each (+ например, у последнего элемента 4 уровня вложенности и класс .bottom-menu нужно добавить всем субменюшкам.)

Какие есть варианты для таких случаев?

html,*{ 
margin: 0; 
padding: 0; 
font-size: 16px; 
} 
 
body{ 
background: #eee; 
} 
a{ 
text-decoration: none; 
} 
.menu { 
  z-index: 100; 
  width: 230px; 
  position: relative; 
  display: block; 
  background: #fff; 
} 
 
.menu ul{ 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
.menu ul li{ 
  display: block; 
  border-bottom: #ccc 1px solid; 
  position: relative; /*это добавить*/ 
} 
.menu ul li a{ 
  display: block; 
  color: #000; 
  padding: 5px; 
} 
 
.menu ul li.active > a, 
.menu ul li a:hover{ 
  text-decoration: none; 
  color: #fff; 
  background: #ccc; 
} 
 
 
.menu ul li .submenu{ 
  display: none; 
  position: absolute; 
  width: 100%; 
  top: 0; 
  left: 100%; 
  background: #ddd; 
} 
 
.menu ul li:hover > .submenu{ 
  display: block; 
} 
 
.menu ul li:hover > .bottom-menu{ 
  bottom: 0;  
  top: auto;  
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <link rel="stylesheet" type="text/css" href="style.css"> 
  <title>Document</title> 
</head> 
<body> 
  <div class="menu"> 
    <ul> 
      <li class="active"><a href="">Sample</a> 
        <ul class="submenu submenu1"> 
          <li><a href="#">Sub</a></li> 
          <li><a href="#">Sub</a></li> 
          <li class="active"><a href="">Sub</a> 
            <ul class="submenu submenu2"> 
              <li><a href="#">Sub</a></li> 
              <li><a href="#">Sub</a></li> 
              <li><a href="#">Sub</a></li> 
              <li class="active"><a href="">Sub</a> 
                <ul class="submenu submenu3"> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li class="active"><a href="">Sub</a></li> 
                </ul><!--// Inner Child 3 --> 
              </li> 
              <li><a href="#">Sub</a></li> 
            </ul><!--// Inner Child 2 --> 
          </li> 
          <li><a href="#">Sub</a></li> 
          <li><a href="#">Sub</a></li> 
        </ul><!--// Inner Child 1 --> 
      </li> 
 
      <li class="active"><a href="">Sample</a> 
        <ul class="submenu submenu1"> 
          <li><a href="#">Sub</a></li> 
          <li><a href="#">Sub</a></li> 
          <li class="active"><a href="">Sub</a> 
            <ul class="submenu submenu2"> 
              <li><a href="#">Sub</a></li> 
              <li><a href="#">Sub</a></li> 
              <li><a href="#">Sub</a></li> 
              <li class="active"><a href="">Sub</a> 
                <ul class="submenu submenu3"> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li class="active"><a href="">Sub</a></li> 
                </ul><!--// Inner Child 3 --> 
              </li> 
              <li><a href="#">Sub</a></li> 
            </ul><!--// Inner Child 2 --> 
          </li> 
          <li><a href="#">Sub</a></li> 
          <li><a href="#">Sub</a></li> 
        </ul><!--// Inner Child 1 --> 
      </li> 
 
      <li class="active"><a href="">Sample</a> 
        <ul class="submenu submenu1"> 
          <li><a href="#">Sub</a></li> 
          <li><a href="#">Sub</a></li> 
          <li class="active"><a href="">Sub</a> 
            <ul class="submenu submenu2"> 
              <li><a href="#">Sub</a></li> 
              <li><a href="#">Sub</a></li> 
              <li><a href="#">Sub</a></li> 
              <li class="active"><a href="">Sub</a> 
                <ul class="submenu submenu3"> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li class="active"><a href="">Sub</a></li> 
                </ul><!--// Inner Child 3 --> 
              </li> 
              <li><a href="#">Sub</a></li> 
            </ul><!--// Inner Child 2 --> 
          </li> 
          <li><a href="#">Sub</a></li> 
          <li><a href="#">Sub</a></li> 
        </ul><!--// Inner Child 1 --> 
      </li> 
 
      <li class="active"><a href="">Sample</a> 
        <ul class="submenu submenu1"> 
          <li><a href="#">Sub</a></li> 
          <li><a href="#">Sub</a></li> 
          <li class="active"><a href="">Sub</a> 
            <ul class="submenu submenu2"> 
              <li><a href="#">Sub</a></li> 
              <li><a href="#">Sub</a></li> 
              <li><a href="#">Sub</a></li> 
              <li class="active"><a href="">Sub</a> 
                <ul class="submenu submenu3"> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li class="active"><a href="">Sub</a></li> 
                </ul><!--// Inner Child 3 --> 
              </li> 
              <li><a href="#">Sub</a></li> 
            </ul><!--// Inner Child 2 --> 
          </li> 
          <li><a href="#">Sub</a></li> 
          <li><a href="#">Sub</a></li> 
        </ul><!--// Inner Child 1 --> 
      </li> 
 
      <li class="active "><a href="">Sample</a> 
        <ul class="submenu bottom-menu"> 
          <li><a href="#">Sub</a></li> 
          <li><a href="#">Sub</a></li> 
          <li class="active "><a href="">Sub</a> 
            <ul class="submenu submenu2"> 
              <li><a href="#">Sub</a></li> 
              <li><a href="#">Sub</a></li> 
              <li><a href="#">Sub</a></li> 
              <li class="active"><a href="">Sub</a> 
                <ul class="submenu submenu3"> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li><a href="#">Sub</a></li> 
                  <li class="active"><a href="">Sub</a></li> 
                </ul><!--// Inner Child 3 --> 
              </li> 
              <li><a href="#">Sub</a></li> 
            </ul><!--// Inner Child 2 --> 
          </li> 
          <li><a href="#">Sub</a></li> 
          <li><a href="#">Sub</a></li> 
        </ul><!--// Inner Child 1 --> 
      </li> 
    </ul> 
  </div><!--// end .menu --> 
 
</body> 
</html>