ActiveList

by marco_rensch

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="directory-section-list">
  <ul class="list_item">
    <li class="li_lvl lvl0" id="bx_1847241719_1">Main1
      <ul>
        <li class=""><span class="li_lvl lvl1">1.5-4.5</span>
          <ul class="sub">
            <li><a link href="#">FD 15</a></li>
            <li><a href="#">FD 18</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="li_lvl lvl0" id="bx_1847241719_2">Main2
      <ul>
        <li class=""><span class="li_lvl lvl1">1.5-4.5</span>
          <ul class="sub">
            <li><a href="#">FD 15</a></li>
            <li><a href="#">FD 18</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

.active {
  background: green;
}

JavaScript

$(document).ready(function() {
	var element = $("li.lvl0").not("ul.sub");
  $(element).click(function() {
    	$(this).toggleClass('active');
    	$(this).siblings().removeClass('active');
  });
});